@orion-studios/payload-studio 0.5.0-beta.3 → 0.5.0-beta.30

package/dist/studio-pages/client.mjs

@@ -14,6 +14,7 @@ var sectionStyleDefaults = {
   contentGradientPreset: "none",
   contentGradientTo: "#f4f6f2",
   contentWidth: "inherit",
+  sectionPaddingX: "inherit",
   sectionBackgroundColor: "#ffffff",
   sectionBackgroundMode: "none",
   sectionGradientAngle: "135",
@@ -41,6 +42,9 @@ var defaultNodeData = {
     items: [
       {
         description: "Before and after result summary.",
+        imageCornerStyle: "rounded",
+        imageFit: "cover",
+        imagePosition: "center",
         label: "Project One"
       }
     ],
@@ -64,9 +68,9 @@ var defaultNodeData = {
   featureGrid: {
     ...withSectionStyleDefaults({}),
     items: [
-      { description: "Explain this point.", icon: "01", title: "Feature One" },
-      { description: "Explain this point.", icon: "02", title: "Feature Two" },
-      { description: "Explain this point.", icon: "03", title: "Feature Three" }
+      { description: "Explain this point.", icon: "01", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature One" },
+      { description: "Explain this point.", icon: "02", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Two" },
+      { description: "Explain this point.", icon: "03", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Three" }
     ],
     title: "Section Title",
     variant: "cards"
@@ -79,7 +83,11 @@ var defaultNodeData = {
   },
   hero: {
     ...withSectionStyleDefaults({}),
-    backgroundColor: "#124a37",
+    backgroundColor: "",
+    backgroundImageCornerStyle: "rounded",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
+    heroHeight: "sm",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",
@@ -92,13 +100,16 @@ var defaultNodeData = {
   media: {
     ...withSectionStyleDefaults({}),
     caption: "Add a caption",
+    imageCornerStyle: "rounded",
+    imageFit: "cover",
+    imagePosition: "center",
     size: "default"
   },
   logoWall: withSectionStyleDefaults({
     items: [
-      { name: "Trusted Partner 1" },
-      { name: "Trusted Partner 2" },
-      { name: "Trusted Partner 3" }
+      { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Trusted Partner 1" },
+      { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Trusted Partner 2" },
+      { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Trusted Partner 3" }
     ],
     subtitle: "Trusted by teams and homeowners across Central Texas.",
     title: "Trusted by Local Organizations"
@@ -425,6 +436,61 @@ var resolveMedia = (value) => {
   }
   return null;
 };
+var normalizeHeroImageFit = (value) => {
+  if (value === "contain" || value === "contain-square") {
+    return "contain";
+  }
+  return "cover";
+};
+var normalizeHeroImageCornerStyle = (value, legacyFitValue) => {
+  if (value === "rounded" || value === "square") {
+    return value;
+  }
+  if (legacyFitValue === "cover-square" || legacyFitValue === "contain-square") {
+    return "square";
+  }
+  return "rounded";
+};
+var getHeroImageCornerRadius = (cornerStyle) => cornerStyle === "square" ? "0px" : "var(--orion-studio-radius-lg)";
+var normalizeHeroImagePosition = (value) => {
+  if (value === "top" || value === "bottom" || value === "left" || value === "right") {
+    return value;
+  }
+  return "center";
+};
+var normalizeHeroHeight = (value) => {
+  if (value === "md" || value === "full") {
+    return value;
+  }
+  return "sm";
+};
+var heroHeightMap = {
+  sm: "360px",
+  md: "50svh",
+  full: "100svh"
+};
+var normalizeImageFit = (value) => normalizeHeroImageFit(value);
+var normalizeImageCornerStyle = (value, legacyFitValue) => normalizeHeroImageCornerStyle(value, legacyFitValue);
+var normalizeImagePosition = (value) => normalizeHeroImagePosition(value);
+var imageObjectPosition = (value) => {
+  switch (value) {
+    case "top":
+      return "center top";
+    case "bottom":
+      return "center bottom";
+    case "left":
+      return "left center";
+    case "right":
+      return "right center";
+    default:
+      return "center center";
+  }
+};
+var getImagePresentationStyle = (options) => ({
+  borderRadius: options.cornerStyle === "square" ? 0 : `${options.roundedRadius ?? 12}px`,
+  objectFit: options.fit || "cover",
+  objectPosition: imageObjectPosition(options.position || "center")
+});
 function cloneBlockLayout(layout) {
   return JSON.parse(JSON.stringify(layout));
 }
@@ -515,6 +581,7 @@ var defaultSectionStyle = {
   contentGradientPreset: "none",
   contentGradientTo: "#f4f6f2",
   contentWidth: "inherit",
+  sectionPaddingX: "inherit",
   sectionBackgroundColor: "#ffffff",
   sectionBackgroundMode: "none",
   sectionGradientAngle: "135",
@@ -536,6 +603,7 @@ var gradientPresetPairs = {
   slate: ["#1a2f2a", "#34524a"]
 };
 var sectionPaddingMap = {
+  none: "0px",
   sm: "1.4rem",
   md: "2.6rem",
   lg: "3.4rem"
@@ -562,8 +630,12 @@ function getDefaultBlock(blockType) {
   switch (blockType) {
     case "hero":
       return withSectionStyleDefaults2({
-        backgroundColor: "#124a37",
+        backgroundColor: "",
+        backgroundImageCornerStyle: "rounded",
+        backgroundImageFit: "cover",
+        backgroundImagePosition: "center",
         blockType: "hero",
+        heroHeight: "sm",
         headline: "New Hero Section",
         kicker: "Optional kicker",
         primaryHref: "/contact",
@@ -578,9 +650,9 @@ function getDefaultBlock(blockType) {
         backgroundColor: "#1f684f",
         blockType: "featureGrid",
         items: [
-          { description: "Explain this point.", icon: "01", title: "Feature One" },
-          { description: "Explain this point.", icon: "02", title: "Feature Two" },
-          { description: "Explain this point.", icon: "03", title: "Feature Three" }
+          { description: "Explain this point.", icon: "01", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature One" },
+          { description: "Explain this point.", icon: "02", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Two" },
+          { description: "Explain this point.", icon: "03", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Three" }
         ],
         title: "Section Title",
         variant: "cards"
@@ -599,14 +671,18 @@ function getDefaultBlock(blockType) {
     case "logoWall":
       return withSectionStyleDefaults2({
         blockType: "logoWall",
-        items: [{ name: "Partner One" }, { name: "Partner Two" }, { name: "Partner Three" }],
+        items: [
+          { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Partner One" },
+          { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Partner Two" },
+          { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Partner Three" }
+        ],
         subtitle: "Show logos from trusted organizations.",
         title: "Trusted by Local Partners"
       });
     case "beforeAfter":
       return withSectionStyleDefaults2({
         blockType: "beforeAfter",
-        items: [{ description: "Project result summary.", label: "Project One" }],
+        items: [{ description: "Project result summary.", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", label: "Project One" }],
         subtitle: "Visual proof from completed projects.",
         title: "Before & After Results"
       });
@@ -621,6 +697,9 @@ function getDefaultBlock(blockType) {
       return withSectionStyleDefaults2({
         blockType: "media",
         caption: "Add a caption",
+        imageCornerStyle: "rounded",
+        imageFit: "cover",
+        imagePosition: "center",
         size: "default"
       });
     case "testimonials":
@@ -690,20 +769,40 @@ function parseAngle(value, fallback = "135") {
 var sectionStyleFromBlock = (block, pageDefaults) => {
   const contentWidthRaw = normalizeText(block.contentWidth, defaultSectionStyle.contentWidth);
   const sectionPaddingRaw = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
-  const sectionPaddingY = sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
+  const sectionPaddingXRaw = normalizeText(block.sectionPaddingX, defaultSectionStyle.sectionPaddingX);
+  const sectionPaddingY = sectionPaddingRaw === "none" || sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
+  const sectionPaddingX = sectionPaddingXRaw === "none" || sectionPaddingXRaw === "sm" || sectionPaddingXRaw === "md" || sectionPaddingXRaw === "lg" ? sectionPaddingXRaw : pageDefaults.pageWidthDefault === "full" ? "none" : "md";
   const contentWidth = contentWidthRaw === "narrow" || contentWidthRaw === "content" || contentWidthRaw === "wide" || contentWidthRaw === "full" || contentWidthRaw === "inherit" ? contentWidthRaw : "inherit";
   const resolvedContentWidth = contentWidth === "inherit" ? pageDefaults.pageWidthDefault : contentWidth;
   const sectionMode = normalizeText(block.sectionBackgroundMode, defaultSectionStyle.sectionBackgroundMode);
-  const sectionColor = parseColor(block.sectionBackgroundColor, defaultSectionStyle.sectionBackgroundColor);
+  const sectionColor = parseColor(
+    normalizeText(block.sectionBackgroundColor, ""),
+    normalizeText(defaultSectionStyle.sectionBackgroundColor, "#ffffff")
+  );
   const sectionPreset = normalizeText(block.sectionGradientPreset, defaultSectionStyle.sectionGradientPreset);
-  const sectionFrom = parseColor(block.sectionGradientFrom, defaultSectionStyle.sectionGradientFrom);
-  const sectionTo = parseColor(block.sectionGradientTo, defaultSectionStyle.sectionGradientTo);
+  const sectionFrom = parseColor(
+    normalizeText(block.sectionGradientFrom, ""),
+    normalizeText(defaultSectionStyle.sectionGradientFrom, "#124a37")
+  );
+  const sectionTo = parseColor(
+    normalizeText(block.sectionGradientTo, ""),
+    normalizeText(defaultSectionStyle.sectionGradientTo, "#1f684f")
+  );
   const sectionAngle = parseAngle(block.sectionGradientAngle, defaultSectionStyle.sectionGradientAngle);
   const contentMode = normalizeText(block.contentBackgroundMode, defaultSectionStyle.contentBackgroundMode);
-  const contentColor = parseColor(block.contentBackgroundColor, defaultSectionStyle.contentBackgroundColor);
+  const contentColor = parseColor(
+    normalizeText(block.contentBackgroundColor, ""),
+    normalizeText(defaultSectionStyle.contentBackgroundColor, "#ffffff")
+  );
   const contentPreset = normalizeText(block.contentGradientPreset, defaultSectionStyle.contentGradientPreset);
-  const contentFrom = parseColor(block.contentGradientFrom, defaultSectionStyle.contentGradientFrom);
-  const contentTo = parseColor(block.contentGradientTo, defaultSectionStyle.contentGradientTo);
+  const contentFrom = parseColor(
+    normalizeText(block.contentGradientFrom, ""),
+    normalizeText(defaultSectionStyle.contentGradientFrom, "#ffffff")
+  );
+  const contentTo = parseColor(
+    normalizeText(block.contentGradientTo, ""),
+    normalizeText(defaultSectionStyle.contentGradientTo, "#f4f6f2")
+  );
   const contentAngle = parseAngle(block.contentGradientAngle, defaultSectionStyle.contentGradientAngle);
   const sectionPresetPair = gradientPresetPairs[sectionPreset];
   const contentPresetPair = gradientPresetPairs[contentPreset];
@@ -714,18 +813,20 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
     contentStyle: contentMode === "color" ? {
       background: contentColor,
       borderRadius: 20,
-      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
+      padding: "1rem"
     } : contentMode === "gradient" ? {
       background: contentGradient,
       borderRadius: 20,
-      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
+      padding: "1rem"
     } : {},
-    sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault}`,
+    sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault} padx-${sectionPaddingX}`,
     sectionInnerStyle: {
       paddingBottom: sectionPaddingMap[sectionPaddingY],
       paddingTop: sectionPaddingMap[sectionPaddingY]
     },
-    sectionStyle: sectionMode === "color" ? { background: sectionColor } : sectionMode === "gradient" ? { background: sectionGradient } : {}
+    sectionStyle: sectionMode === "color" ? { background: sectionColor } : sectionMode === "gradient" ? { background: sectionGradient } : block.blockType === "hero" ? { background: "transparent" } : {}
   };
 };
 function getRelationID(value) {
@@ -743,6 +844,19 @@ function getRelationID(value) {
   }
   return null;
 }
+function getMediaURL(value) {
+  if (!value || typeof value !== "object") {
+    return "";
+  }
+  const typed = value;
+  if (typeof typed.url === "string" && typed.url.trim().length > 0) {
+    return typed.url.trim();
+  }
+  if (typeof typed.filename === "string" && typed.filename.trim().length > 0) {
+    return `/api/media/file/${encodeURIComponent(typed.filename)}`;
+  }
+  return "";
+}
 function extractUploadedMedia(value) {
   const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
   if (!candidate || typeof candidate !== "object") {
@@ -759,18 +873,58 @@ function extractUploadedMedia(value) {
     url: typeof candidate.url === "string" ? candidate.url : ""
   };
 }
-function getUploadedMediaURL(value) {
+function toMediaLibraryItem(value) {
   if (!value || typeof value !== "object") {
-    return "";
+    return null;
+  }
+  const id = getRelationID(value);
+  if (id === null) {
+    return null;
   }
   const typed = value;
-  if (typeof typed.url === "string" && typed.url.length > 0) {
-    return typed.url;
+  const filename = typeof typed.filename === "string" ? typed.filename : "";
+  const url = typeof typed.url === "string" && typed.url.length > 0 ? typed.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  return {
+    alt: typeof typed.alt === "string" ? typed.alt : "",
+    filename,
+    id,
+    url
+  };
+}
+function mediaLabel(item) {
+  return item.filename || item.alt || `Media #${item.id}`;
+}
+function mediaFromLibraryItem(item) {
+  return {
+    alt: item.alt,
+    filename: item.filename,
+    id: item.id,
+    url: item.url
+  };
+}
+async function parsePayloadErrorMessage(response, fallbackMessage) {
+  const contentType = response.headers.get("content-type") || "";
+  if (!contentType.toLowerCase().includes("application/json")) {
+    const raw = await response.text();
+    return raw.trim() || fallbackMessage;
   }
-  if (typeof typed.filename === "string" && typed.filename.length > 0) {
-    return `/api/media/file/${encodeURIComponent(typed.filename)}`;
+  try {
+    const payload = await response.json();
+    const nestedMessage = payload.errors?.[0]?.data?.errors?.[0]?.message;
+    if (typeof nestedMessage === "string" && nestedMessage.trim().length > 0) {
+      return nestedMessage;
+    }
+    const topMessage = payload.errors?.[0]?.message;
+    if (typeof topMessage === "string" && topMessage.trim().length > 0) {
+      return topMessage;
+    }
+    if (typeof payload.message === "string" && payload.message.trim().length > 0) {
+      return payload.message;
+    }
+  } catch {
+    return fallbackMessage;
   }
-  return "";
+  return fallbackMessage;
 }
 var MAX_DIRECT_UPLOAD_BYTES = 4e6;
 async function optimizeImageForUpload(file) {
@@ -1122,22 +1276,19 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [dragIndex, setDragIndex] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [savingStatus, setSavingStatus] = useState(null);
-  const [saveMessage, setSaveMessage] = useState("");
-  const [saveError, setSaveError] = useState("");
   const [uploadingTarget, setUploadingTarget] = useState(null);
   const [uploadError, setUploadError] = useState("");
   const [uploadMessage, setUploadMessage] = useState("");
   const [uploadAltText, setUploadAltText] = useState("");
+  const [mediaLibrary, setMediaLibrary] = useState([]);
+  const [mediaLibraryError, setMediaLibraryError] = useState("");
+  const [mediaLibraryLoading, setMediaLibraryLoading] = useState(false);
+  const [selectedHeroMediaID, setSelectedHeroMediaID] = useState("");
   const [presetQuery, setPresetQuery] = useState("");
   const [pastSnapshots, setPastSnapshots] = useState([]);
   const [futureSnapshots, setFutureSnapshots] = useState([]);
-  const [panelState, setPanelState] = useState({
-    addSections: true,
-    pageDefaults: true,
-    quickAdd: true,
-    save: true,
-    selected: true
-  });
+  const isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
+  const [activeSidebarPanel, setActiveSidebarPanel] = useState("selected");
   const historyBypassRef = useRef(true);
   const previousSnapshotRef = useRef({
     layout: cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block)),
@@ -1154,6 +1305,23 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     ...defaultSectionStyle,
     ...selectedBlock || {}
   };
+  const resolveMediaLibraryItemFromValue = (value) => {
+    const direct = toMediaLibraryItem(value);
+    if (direct) {
+      return direct;
+    }
+    const relationID = getRelationID(value);
+    if (relationID === null) {
+      return null;
+    }
+    return mediaLibrary.find((item) => String(item.id) === String(relationID)) || null;
+  };
+  const selectedHeroMedia = useMemo(() => {
+    if (selectedType !== "hero" || !selectedBlock) {
+      return null;
+    }
+    return resolveMediaLibraryItemFromValue(selectedBlock.media);
+  }, [mediaLibrary, selectedBlock, selectedType]);
   const filteredSectionPresets = useMemo(() => {
     const query = presetQuery.trim().toLowerCase();
     if (!query) {
@@ -1163,6 +1331,37 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       (preset) => `${preset.title} ${preset.description}`.toLowerCase().includes(query)
     );
   }, [presetQuery]);
+  useEffect(() => {
+    const loadMediaLibrary = async () => {
+      setMediaLibraryLoading(true);
+      setMediaLibraryError("");
+      try {
+        const response = await fetch("/api/media?depth=1&limit=100&sort=-updatedAt", {
+          credentials: "include"
+        });
+        if (!response.ok) {
+          throw new Error("Could not load media library.");
+        }
+        const json = await response.json();
+        const docs = Array.isArray(json.docs) ? json.docs : [];
+        const items = docs.map((doc2) => toMediaLibraryItem(doc2)).filter((item) => item !== null);
+        setMediaLibrary(items);
+      } catch (error) {
+        setMediaLibraryError(error instanceof Error ? error.message : "Could not load media library.");
+      } finally {
+        setMediaLibraryLoading(false);
+      }
+    };
+    void loadMediaLibrary();
+  }, []);
+  useEffect(() => {
+    if (selectedType !== "hero") {
+      setSelectedHeroMediaID("");
+      return;
+    }
+    const relationID = getRelationID(selectedBlock?.media);
+    setSelectedHeroMediaID(relationID !== null ? String(relationID) : "");
+  }, [selectedBlock, selectedType]);
   const applyTemplateStarter = () => {
     const templateBlocks = templateStarterPresets[pageTemplate] || templateStarterPresets.standard;
     const nextLayout = clonePresetBlocks(templateBlocks).map((block) => withSectionStyleDefaults2(block));
@@ -1247,6 +1446,55 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       currentItems.filter((_, index) => index !== itemIndex)
     );
   };
+  const setSelectedMediaFieldFromLibrary = (fieldName, mediaID) => {
+    if (!mediaID) {
+      updateSelectedField(fieldName, null);
+      if (selectedType === "hero" && fieldName === "media") {
+        updateSelectedField("backgroundImageURL", "");
+        setSelectedHeroMediaID("");
+      }
+      return;
+    }
+    const selectedMedia = mediaLibrary.find((item) => String(item.id) === mediaID);
+    if (!selectedMedia) {
+      return;
+    }
+    updateSelectedField(fieldName, mediaFromLibraryItem(selectedMedia));
+    if (selectedType === "hero" && fieldName === "media") {
+      updateSelectedField("backgroundImageURL", selectedMedia.url);
+      setSelectedHeroMediaID(String(selectedMedia.id));
+    }
+  };
+  const setSelectedItemMediaFieldFromLibrary = (itemIndex, fieldName, mediaID) => {
+    if (selectedIndex === null) {
+      return;
+    }
+    if (!mediaID) {
+      updateArrayItemField(selectedIndex, "items", itemIndex, fieldName, null);
+      return;
+    }
+    const selectedMedia = mediaLibrary.find((item) => String(item.id) === mediaID);
+    if (!selectedMedia) {
+      return;
+    }
+    updateArrayItemField(selectedIndex, "items", itemIndex, fieldName, mediaFromLibraryItem(selectedMedia));
+  };
+  const setHeroMediaFromLibrary = (mediaID) => {
+    if (selectedIndex === null || selectedType !== "hero") {
+      return;
+    }
+    setSelectedMediaFieldFromLibrary("media", mediaID);
+  };
+  const clearHeroMedia = () => {
+    if (selectedType !== "hero") {
+      return;
+    }
+    updateSelectedField("media", null);
+    updateSelectedField("backgroundImageURL", "");
+    setSelectedHeroMediaID("");
+    setUploadMessage("Hero image removed.");
+    setUploadError("");
+  };
   const uploadMediaForSelected = async (target, file) => {
     if (selectedIndex === null) {
       setUploadError("Select a section first.");
@@ -1272,8 +1520,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         method: "POST"
       });
       if (!response.ok) {
-        const body = await response.text();
-        throw new Error(body || "Upload failed");
+        throw new Error(await parsePayloadErrorMessage(response, "Could not upload image."));
       }
       const json = await response.json();
       const uploaded = extractUploadedMedia(json);
@@ -1283,12 +1530,19 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       const nextLayout = cloneBlockLayout(layout);
       const block = nextLayout[selectedIndex];
       if (target.kind === "hero") {
-        const uploadedURL = getUploadedMediaURL(uploaded);
+        const uploadedItem = toMediaLibraryItem(uploaded);
         nextLayout[selectedIndex] = {
           ...block,
-          backgroundImageURL: uploadedURL,
+          backgroundImageURL: uploadedItem?.url || normalizeText(uploaded.url),
           media: uploaded
         };
+        if (uploadedItem) {
+          setMediaLibrary((current) => {
+            const deduped = current.filter((item) => String(item.id) !== String(uploadedItem.id));
+            return [uploadedItem, ...deduped];
+          });
+          setSelectedHeroMediaID(String(uploadedItem.id));
+        }
       } else if (target.kind === "media") {
         nextLayout[selectedIndex] = {
           ...block,
@@ -1314,6 +1568,25 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       setUploadingTarget(null);
     }
   };
+  const withHeroMediaFallbacks = (sourceLayout) => sourceLayout.map((block) => {
+    if (!block || typeof block !== "object") {
+      return block;
+    }
+    const nextBlock = { ...block };
+    const blockType = normalizeText(nextBlock.blockType);
+    if (blockType !== "hero") {
+      return nextBlock;
+    }
+    const existingBackgroundImageURL = normalizeText(nextBlock.backgroundImageURL).trim();
+    if (existingBackgroundImageURL.length > 0) {
+      return nextBlock;
+    }
+    const mediaURL = getMediaURL(nextBlock.media);
+    if (mediaURL.length > 0) {
+      nextBlock.backgroundImageURL = mediaURL;
+    }
+    return nextBlock;
+  });
   const toPersistedLayout = (sourceLayout) => sourceLayout.map((block) => {
     if (!block || typeof block !== "object") {
       return block;
@@ -1358,7 +1631,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   });
   const renderWithSectionShell = (block, className, content) => {
     const shell = sectionStyleFromBlock(block, pageDefaults);
-    return /* @__PURE__ */ jsx("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx("div", { className: shell.contentClass, style: shell.contentStyle, children: /* @__PURE__ */ jsx("div", { style: shell.sectionInnerStyle, children: content }) }) });
+    return /* @__PURE__ */ jsx("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx("div", { className: shell.contentClass, style: shell.contentStyle, children: content }) }) });
   };
   const sidebarSectionStyle = {
     border: "1px solid rgba(13, 74, 55, 0.15)",
@@ -1450,8 +1723,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setLayout(cloneBlockLayout(target.layout));
     setPageDefaults(clonePageDefaults(target.pageDefaults));
   };
-  const togglePanel = (panel) => {
-    setPanelState((current) => ({ ...current, [panel]: !current[panel] }));
+  const collapseSidebar = () => setSidebarOpen(false);
+  const openSidebarPanel = (panel) => {
+    setActiveSidebarPanel(panel);
+    setSidebarOpen(true);
   };
   const setSelectedStyleField = (fieldName, value) => {
     updateSelectedField(fieldName, value);
@@ -1473,17 +1748,19 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     }
   };
   const saveLayout = async (status) => {
+    if (savingStatus !== null) {
+      return false;
+    }
     setSavingStatus(status);
-    setSaveError("");
-    setSaveMessage("");
     try {
-      const persistedLayout = toPersistedLayout(layout);
+      const normalizedLayout = withHeroMediaFallbacks(layout);
+      const persistedLayout = toPersistedLayout(normalizedLayout);
       const response = await fetch(`/api/pages/${pageID}`, {
         body: JSON.stringify({
           _status: status,
           layout: persistedLayout,
           studioDocument: layoutToStudioDocument(
-            layout,
+            normalizedLayout,
             title,
             {
               pageWidthDefault: pageDefaults.pageWidthDefault
@@ -1497,14 +1774,19 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         method: "PATCH"
       });
       if (!response.ok) {
-        const body = await response.text();
-        throw new Error(body || "Failed to save page");
+        throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
       }
-      setSaveMessage(status === "published" ? "Published." : "Draft saved.");
-      lastSavedRef.current = cloneSnapshot({
-        layout: cloneBlockLayout(layout),
+      const savedSnapshot = {
+        layout: cloneBlockLayout(normalizedLayout),
         pageDefaults: clonePageDefaults(pageDefaults)
-      });
+      };
+      const shouldSyncLayout = snapshotKey(savedSnapshot) !== snapshotKey(currentSnapshot);
+      if (shouldSyncLayout) {
+        historyBypassRef.current = true;
+        previousSnapshotRef.current = cloneSnapshot(savedSnapshot);
+        setLayout(cloneBlockLayout(savedSnapshot.layout));
+      }
+      lastSavedRef.current = cloneSnapshot(savedSnapshot);
       window.parent?.postMessage(
         {
           message: status === "published" ? "Published." : "Draft saved.",
@@ -1518,10 +1800,9 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       return true;
     } catch (error) {
       console.error(error);
-      setSaveError("Could not save. Check permissions/session and retry.");
       window.parent?.postMessage(
         {
-          message: "Could not save. Check permissions/session and retry.",
+          message: error instanceof Error ? error.message : "Could not save. Check permissions/session and retry.",
           ok: false,
           source: "payload-visual-builder-child",
           status,
@@ -1542,26 +1823,42 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     }
     try {
       const parsed = JSON.parse(raw);
-      setPanelState((current) => ({
-        addSections: typeof parsed.addSections === "boolean" ? parsed.addSections : current.addSections,
-        pageDefaults: typeof parsed.pageDefaults === "boolean" ? parsed.pageDefaults : current.pageDefaults,
-        quickAdd: typeof parsed.quickAdd === "boolean" ? parsed.quickAdd : current.quickAdd,
-        save: typeof parsed.save === "boolean" ? parsed.save : current.save,
-        selected: typeof parsed.selected === "boolean" ? parsed.selected : current.selected
-      }));
+      const maybeActive = parsed.activePanel;
+      if (isSidebarPanelKey(maybeActive)) {
+        setActiveSidebarPanel(maybeActive);
+        return;
+      }
+      const oldSelected = typeof parsed.selected === "boolean" ? parsed.selected : false;
+      const oldAdd = (typeof parsed.addSections === "boolean" ? parsed.addSections : false) || (typeof parsed.addContent === "boolean" ? parsed.addContent : false) || (typeof parsed.quickAdd === "boolean" ? parsed.quickAdd : false);
+      const oldDefaults = typeof parsed.pageDefaults === "boolean" ? parsed.pageDefaults : false;
+      if (oldSelected) {
+        setActiveSidebarPanel("selected");
+      } else if (oldAdd) {
+        setActiveSidebarPanel("addSections");
+      } else if (oldDefaults) {
+        setActiveSidebarPanel("pageDefaults");
+      }
     } catch {
     }
   }, [pageID]);
   useEffect(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
-    window.localStorage.setItem(storageKey, JSON.stringify(panelState));
-  }, [pageID, panelState]);
+    window.localStorage.setItem(storageKey, JSON.stringify({ activePanel: activeSidebarPanel }));
+  }, [activeSidebarPanel, pageID]);
   useEffect(() => {
     if (selectedIndex === null) {
       return;
     }
-    setPanelState((current) => current.selected ? current : { ...current, selected: true });
+    setSidebarOpen(true);
+    setActiveSidebarPanel("selected");
   }, [selectedIndex]);
+  useEffect(() => {
+    if (layout.length > 0) {
+      return;
+    }
+    setSidebarOpen(true);
+    setActiveSidebarPanel("addSections");
+  }, [layout.length]);
   useEffect(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
@@ -1592,29 +1889,79 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [canRedo, canUndo, futureSnapshots, pastSnapshots, currentSnapshot]);
   useEffect(() => {
-    const onBeforeUnload = (event) => {
-      if (!isDirty) {
-        return;
-      }
-      event.preventDefault();
-      event.returnValue = "";
-    };
-    window.addEventListener("beforeunload", onBeforeUnload);
-    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    window.parent?.postMessage(
+      {
+        dirty: isDirty,
+        source: "payload-visual-builder-child",
+        type: "dirty-state"
+      },
+      "*"
+    );
   }, [isDirty]);
+  useEffect(() => {
+    window.parent?.postMessage(
+      {
+        canRedo,
+        canUndo,
+        source: "payload-visual-builder-child",
+        type: "history-state"
+      },
+      "*"
+    );
+  }, [canRedo, canUndo]);
   useEffect(() => {
     const onMessage = (event) => {
       const data = event.data;
-      if (!data || data.source !== "payload-visual-builder-parent" || data.type !== "save") {
+      if (!data || data.source !== "payload-visual-builder-parent") {
+        return;
+      }
+      if (data.type === "dirty-check-request") {
+        window.parent?.postMessage(
+          {
+            dirty: isDirty,
+            source: "payload-visual-builder-child",
+            type: "dirty-state"
+          },
+          "*"
+        );
+        window.parent?.postMessage(
+          {
+            canRedo,
+            canUndo,
+            source: "payload-visual-builder-child",
+            type: "history-state"
+          },
+          "*"
+        );
+        return;
+      }
+      if (data.type === "history-check-request") {
+        window.parent?.postMessage(
+          {
+            canRedo,
+            canUndo,
+            source: "payload-visual-builder-child",
+            type: "history-state"
+          },
+          "*"
+        );
         return;
       }
-      if (data.status === "draft" || data.status === "published") {
+      if (data.type === "save" && (data.status === "draft" || data.status === "published")) {
         void saveLayout(data.status);
+        return;
+      }
+      if (data.type === "undo") {
+        undo();
+        return;
+      }
+      if (data.type === "redo") {
+        redo();
       }
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [layout, pageDefaults.pageWidthDefault, title]);
+  }, [canRedo, canUndo, isDirty, layout, pageDefaults.pageWidthDefault, title]);
   useEffect(() => {
     const preventNavigationWhileEditing = (event) => {
       const editorRoot = editorRootRef.current;
@@ -1649,43 +1996,6 @@ function BuilderPageEditor({ initialDoc, pageID }) {
       },
       children: [
         /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                alignItems: "center",
-                display: "flex",
-                gap: 8,
-                justifyContent: "space-between",
-                marginBottom: 10
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: isDirty ? "Unsaved changes" : "All changes saved" }),
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      disabled: !canUndo,
-                      onClick: undo,
-                      style: { borderRadius: 999, cursor: canUndo ? "pointer" : "not-allowed", fontSize: 12, padding: "7px 11px" },
-                      type: "button",
-                      children: "Undo"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      disabled: !canRedo,
-                      onClick: redo,
-                      style: { borderRadius: 999, cursor: canRedo ? "pointer" : "not-allowed", fontSize: 12, padding: "7px 11px" },
-                      type: "button",
-                      children: "Redo"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
           layout.map((block, index) => {
             const type = normalizeText(block.blockType, "unknown");
             const selectBlock = () => setSelectedIndex(index);
@@ -1700,14 +2010,36 @@ function BuilderPageEditor({ initialDoc, pageID }) {
             if (type === "hero") {
               const media = resolveMedia(block.media);
               const variant = normalizeText(block.variant, "default");
-              const backgroundColor = normalizeText(block.backgroundColor);
+              const backgroundColor = normalizeText(block.backgroundColor).trim();
+              const backgroundImageFit = normalizeHeroImageFit(block.backgroundImageFit);
+              const backgroundImageCornerStyle = normalizeHeroImageCornerStyle(
+                block.backgroundImageCornerStyle,
+                block.backgroundImageFit
+              );
+              const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
+              const heroHeight = normalizeHeroHeight(block.heroHeight);
+              const heroMinHeight = heroHeightMap[heroHeight];
+              const heroCornerRadius = getHeroImageCornerRadius(backgroundImageCornerStyle);
+              const sectionBackgroundMode = normalizeText(
+                block.sectionBackgroundMode,
+                defaultSectionStyle.sectionBackgroundMode
+              );
               const backgroundImageURL = normalizeText(block.backgroundImageURL);
-              const backgroundImage = backgroundImageURL || media?.url;
+              const backgroundImage = media?.url || backgroundImageURL;
+              const hasCustomHeroColor = backgroundColor.length > 0 && backgroundColor.toLowerCase() !== "#124a37";
               const mediaStyle = backgroundImage && variant === "default" ? {
-                backgroundColor: backgroundColor || void 0,
-                backgroundImage: `linear-gradient(145deg, rgba(13, 74, 55, 0.34), rgba(13, 74, 55, 0.74)), url('${backgroundImage}')`
-              } : {
-                backgroundColor: backgroundColor || void 0
+                ...hasCustomHeroColor ? { backgroundColor } : {},
+                backgroundImage: `url('${backgroundImage}')`,
+                backgroundPosition: backgroundImagePosition,
+                backgroundRepeat: "no-repeat",
+                backgroundSize: backgroundImageFit,
+                minHeight: heroMinHeight
+              } : hasCustomHeroColor && sectionBackgroundMode !== "none" ? {
+                backgroundColor,
+                minHeight: heroMinHeight
+              } : { minHeight: heroMinHeight };
+              const heroStyle = {
+                borderRadius: heroCornerRadius
               };
               return /* @__PURE__ */ jsx(
                 BlockFrame,
@@ -1721,8 +2053,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                   setDragIndex,
                   children: renderWithSectionShell(
                     block,
-                    `hero ${variant === "centered" ? "hero-centered" : ""}`,
-                    /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "",
+                    /* @__PURE__ */ jsxs("section", { className: `hero ${variant === "centered" ? "hero-centered" : ""}`, style: heroStyle, children: [
                       /* @__PURE__ */ jsx("div", { className: "hero-grid", children: /* @__PURE__ */ jsx("div", { className: "hero-media", role: "img", style: mediaStyle }) }),
                       /* @__PURE__ */ jsxs("div", { className: "hero-content", children: [
                         /* @__PURE__ */ jsx("div", { className: "kicker", children: /* @__PURE__ */ jsx(
@@ -1809,47 +2141,57 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             value: normalizeText(block.title)
                           }
                         ) }) }),
-                        /* @__PURE__ */ jsx("div", { className: "feature-grid", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs("article", { className: "feature-item", children: [
-                          resolveMedia(item?.media)?.url ? (
-                            // eslint-disable-next-line @next/next/no-img-element
+                        /* @__PURE__ */ jsx("div", { className: "feature-grid", children: items.map((item, itemIndex) => {
+                          const itemRecord = item;
+                          const itemMedia = resolveMedia(itemRecord?.media);
+                          const itemImageStyle = getImagePresentationStyle({
+                            cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
+                            fit: normalizeImageFit(itemRecord?.imageFit),
+                            position: normalizeImagePosition(itemRecord?.imagePosition)
+                          });
+                          return /* @__PURE__ */ jsxs("article", { className: "feature-item", children: [
+                            itemMedia?.url ? (
+                              // eslint-disable-next-line @next/next/no-img-element
+                              /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  alt: itemMedia.alt || normalizeText(itemRecord?.title, "Feature image"),
+                                  className: "feature-item-media",
+                                  src: itemMedia.url,
+                                  style: itemImageStyle
+                                }
+                              )
+                            ) : null,
+                            /* @__PURE__ */ jsx("div", { className: "feature-icon", children: /* @__PURE__ */ jsx(
+                              InlineText,
+                              {
+                                as: "span",
+                                onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "icon", value),
+                                placeholder: "01",
+                                value: normalizeText(itemRecord?.icon)
+                              }
+                            ) }),
                             /* @__PURE__ */ jsx(
-                              "img",
+                              InlineText,
+                              {
+                                as: "h3",
+                                onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "title", value),
+                                placeholder: "Feature title",
+                                value: normalizeText(itemRecord?.title)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              InlineText,
                               {
-                                alt: resolveMedia(item?.media)?.alt || normalizeText(item?.title, "Feature image"),
-                                className: "feature-item-media",
-                                src: resolveMedia(item?.media)?.url
+                                as: "p",
+                                multiline: true,
+                                onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
+                                placeholder: "Feature description",
+                                value: normalizeText(itemRecord?.description)
                               }
                             )
-                          ) : null,
-                          /* @__PURE__ */ jsx("div", { className: "feature-icon", children: /* @__PURE__ */ jsx(
-                            InlineText,
-                            {
-                              as: "span",
-                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "icon", value),
-                              placeholder: "01",
-                              value: normalizeText(item?.icon)
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx(
-                            InlineText,
-                            {
-                              as: "h3",
-                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "title", value),
-                              placeholder: "Feature title",
-                              value: normalizeText(item?.title)
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            InlineText,
-                            {
-                              as: "p",
-                              multiline: true,
-                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
-                              placeholder: "Feature description",
-                              value: normalizeText(item?.description)
-                            }
-                          )
-                        ] }, `item-${itemIndex}`)) })
+                          ] }, `item-${itemIndex}`);
+                        }) })
                       ] }) })
                     )
                   },
@@ -1879,47 +2221,57 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                           value: normalizeText(block.title)
                         }
                       ) }) }),
-                      /* @__PURE__ */ jsx("div", { className: "card-grid services", children: items.map((item, itemIndex) => /* @__PURE__ */ jsx("article", { className: "service-card", children: /* @__PURE__ */ jsxs("div", { className: "service-body", children: [
-                        resolveMedia(item?.media)?.url ? (
-                          // eslint-disable-next-line @next/next/no-img-element
+                      /* @__PURE__ */ jsx("div", { className: "card-grid services", children: items.map((item, itemIndex) => {
+                        const itemRecord = item;
+                        const itemMedia = resolveMedia(itemRecord?.media);
+                        const itemImageStyle = getImagePresentationStyle({
+                          cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
+                          fit: normalizeImageFit(itemRecord?.imageFit),
+                          position: normalizeImagePosition(itemRecord?.imagePosition)
+                        });
+                        return /* @__PURE__ */ jsx("article", { className: "service-card", children: /* @__PURE__ */ jsxs("div", { className: "service-body", children: [
+                          itemMedia?.url ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                alt: itemMedia.alt || normalizeText(itemRecord?.title, "Feature image"),
+                                className: "feature-item-media feature-item-media-card",
+                                src: itemMedia.url,
+                                style: itemImageStyle
+                              }
+                            )
+                          ) : null,
+                          /* @__PURE__ */ jsx("div", { className: "service-tag", children: /* @__PURE__ */ jsx(
+                            InlineText,
+                            {
+                              as: "span",
+                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "icon", value),
+                              placeholder: "01",
+                              value: normalizeText(itemRecord?.icon)
+                            }
+                          ) }),
                           /* @__PURE__ */ jsx(
-                            "img",
+                            InlineText,
+                            {
+                              as: "h3",
+                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "title", value),
+                              placeholder: "Feature title",
+                              value: normalizeText(itemRecord?.title)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            InlineText,
                             {
-                              alt: resolveMedia(item?.media)?.alt || normalizeText(item?.title, "Feature image"),
-                              className: "feature-item-media feature-item-media-card",
-                              src: resolveMedia(item?.media)?.url
+                              as: "p",
+                              multiline: true,
+                              onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
+                              placeholder: "Feature description",
+                              value: normalizeText(itemRecord?.description)
                             }
                           )
-                        ) : null,
-                        /* @__PURE__ */ jsx("div", { className: "service-tag", children: /* @__PURE__ */ jsx(
-                          InlineText,
-                          {
-                            as: "span",
-                            onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "icon", value),
-                            placeholder: "01",
-                            value: normalizeText(item?.icon)
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx(
-                          InlineText,
-                          {
-                            as: "h3",
-                            onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "title", value),
-                            placeholder: "Feature title",
-                            value: normalizeText(item?.title)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          InlineText,
-                          {
-                            as: "p",
-                            multiline: true,
-                            onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
-                            placeholder: "Feature description",
-                            value: normalizeText(item?.description)
-                          }
-                        )
-                      ] }) }, `item-${itemIndex}`)) })
+                        ] }) }, `item-${itemIndex}`);
+                      }) })
                     ] })
                   )
                 },
@@ -2038,6 +2390,12 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                       ] }) }),
                       /* @__PURE__ */ jsx("div", { className: "orion-logo-wall", children: items.map((item, itemIndex) => {
                         const media = resolveMedia(item?.media);
+                        const imageStyle = getImagePresentationStyle({
+                          cornerStyle: normalizeImageCornerStyle(item?.imageCornerStyle),
+                          fit: normalizeImageFit(item?.imageFit),
+                          position: normalizeImagePosition(item?.imagePosition),
+                          roundedRadius: 10
+                        });
                         return /* @__PURE__ */ jsx("article", { className: "orion-logo-wall-item", children: media?.url ? (
                           // eslint-disable-next-line @next/next/no-img-element
                           /* @__PURE__ */ jsx(
@@ -2045,7 +2403,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             {
                               alt: media.alt || normalizeText(item?.name, "Logo"),
                               className: "orion-logo-wall-image",
-                              src: media.url
+                              src: media.url,
+                              style: imageStyle
                             }
                           )
                         ) : /* @__PURE__ */ jsx(
@@ -2104,6 +2463,11 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                       /* @__PURE__ */ jsx("div", { className: "orion-before-after-grid", children: items.map((item, itemIndex) => {
                         const beforeMedia = resolveMedia(item?.beforeMedia);
                         const afterMedia = resolveMedia(item?.afterMedia);
+                        const imageStyle = getImagePresentationStyle({
+                          cornerStyle: normalizeImageCornerStyle(item?.imageCornerStyle),
+                          fit: normalizeImageFit(item?.imageFit),
+                          position: normalizeImagePosition(item?.imagePosition)
+                        });
                         return /* @__PURE__ */ jsxs("article", { className: "orion-before-after-card", children: [
                           /* @__PURE__ */ jsxs("div", { className: "orion-before-after-media", children: [
                             /* @__PURE__ */ jsxs("figure", { children: [
@@ -2113,7 +2477,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                   "img",
                                   {
                                     alt: beforeMedia.alt || `${normalizeText(item?.label, "Project")} before`,
-                                    src: beforeMedia.url
+                                    src: beforeMedia.url,
+                                    style: imageStyle
                                   }
                                 )
                               ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", children: "Before" }),
@@ -2126,7 +2491,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                   "img",
                                   {
                                     alt: afterMedia.alt || `${normalizeText(item?.label, "Project")} after`,
-                                    src: afterMedia.url
+                                    src: afterMedia.url,
+                                    style: imageStyle
                                   }
                                 )
                               ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", children: "After" }),
@@ -2391,6 +2757,11 @@ function BuilderPageEditor({ initialDoc, pageID }) {
             if (type === "media") {
               const image = resolveMedia(block.image);
               const size = normalizeText(block.size, "default");
+              const imageStyle = getImagePresentationStyle({
+                cornerStyle: normalizeImageCornerStyle(block?.imageCornerStyle),
+                fit: normalizeImageFit(block?.imageFit),
+                position: normalizeImagePosition(block?.imagePosition)
+              });
               return /* @__PURE__ */ jsx(
                 BlockFrame,
                 {
@@ -2407,7 +2778,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                     /* @__PURE__ */ jsxs("figure", { className: `media-figure ${size === "wide" ? "wide" : ""}`, children: [
                       image?.url ? (
                         // eslint-disable-next-line @next/next/no-img-element
-                        /* @__PURE__ */ jsx("img", { alt: image.alt || "Page media", src: image.url })
+                        /* @__PURE__ */ jsx("img", { alt: image.alt || "Page media", src: image.url, style: imageStyle })
                       ) : /* @__PURE__ */ jsx(
                         "div",
                         {
@@ -2610,998 +2981,1572 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                       ] }) : /* @__PURE__ */ jsx("span", { children: "+" })
                     }
                   ),
-                  sidebarOpen ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 12, maxHeight: "calc(100vh - 90px)", overflowY: "auto", padding: 12 }, children: [
-                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
-                      /* @__PURE__ */ jsxs(
+                  (() => {
+                    const tabs = [
+                      { key: "pageDefaults", label: "Page Defaults" },
+                      { key: "addSections", label: "Add Sections" },
+                      { key: "selected", label: "Selected Section" }
+                    ].map((panel) => {
+                      const isActive = activeSidebarPanel === panel.key;
+                      const iconFill = isActive ? "#ffffff" : "#124a37";
+                      const iconButtonBg = isActive ? "#124a37" : "rgba(18, 74, 55, 0.08)";
+                      return /* @__PURE__ */ jsxs(
                         "button",
                         {
-                          onClick: () => togglePanel("save"),
-                          style: { alignItems: "center", background: "transparent", border: "none", cursor: "pointer", display: "flex", fontSize: 13, fontWeight: 700, justifyContent: "space-between", padding: 0, width: "100%" },
+                          "aria-label": panel.label,
+                          onClick: () => openSidebarPanel(panel.key),
+                          style: {
+                            alignItems: "center",
+                            background: iconButtonBg,
+                            border: "1px solid rgba(18, 74, 55, 0.14)",
+                            borderRadius: 14,
+                            cursor: "pointer",
+                            display: "grid",
+                            height: 34,
+                            placeItems: "center",
+                            width: 34
+                          },
+                          title: panel.label,
                           type: "button",
                           children: [
-                            /* @__PURE__ */ jsx("span", { children: "Save & Publish" }),
-                            /* @__PURE__ */ jsx("span", { children: panelState.save ? "Hide" : "Show" })
+                            panel.key === "pageDefaults" ? /* @__PURE__ */ jsxs("svg", { fill: "none", height: "18", viewBox: "0 0 24 24", width: "18", children: [
+                              /* @__PURE__ */ jsx("rect", { height: "14", rx: "2", stroke: iconFill, strokeWidth: "2", width: "18", x: "3", y: "5" }),
+                              /* @__PURE__ */ jsx("path", { d: "M9 5v14", stroke: iconFill, strokeWidth: "2" })
+                            ] }) : null,
+                            panel.key === "addSections" ? /* @__PURE__ */ jsxs("svg", { fill: "none", height: "18", viewBox: "0 0 24 24", width: "18", children: [
+                              /* @__PURE__ */ jsx("path", { d: "M12 5v14", stroke: iconFill, strokeWidth: "2", strokeLinecap: "round" }),
+                              /* @__PURE__ */ jsx("path", { d: "M5 12h14", stroke: iconFill, strokeWidth: "2", strokeLinecap: "round" })
+                            ] }) : null,
+                            panel.key === "selected" ? /* @__PURE__ */ jsx("svg", { fill: "none", height: "18", viewBox: "0 0 24 24", width: "18", children: /* @__PURE__ */ jsx("path", { d: "M6 3l12 9-7 2-2 7-3-18z", fill: iconFill, opacity: "0.92" }) }) : null
                           ]
-                        }
-                      ),
-                      panelState.save ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: [
-                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11, fontWeight: 600 }, children: isDirty ? "Unsaved edits" : "All changes saved" }),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: !canUndo,
-                              onClick: undo,
-                              style: { borderRadius: 999, cursor: canUndo ? "pointer" : "not-allowed", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Undo"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: !canRedo,
-                              onClick: redo,
-                              style: { borderRadius: 999, cursor: canRedo ? "pointer" : "not-allowed", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Redo"
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: savingStatus !== null,
-                              onClick: () => void saveLayout("draft"),
-                              style: {
-                                borderRadius: 999,
-                                cursor: savingStatus ? "not-allowed" : "pointer",
-                                fontSize: 12,
-                                fontWeight: 700,
-                                padding: "7px 10px"
-                              },
-                              type: "button",
-                              children: savingStatus === "draft" ? "Saving..." : "Save Draft"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: savingStatus !== null,
-                              onClick: () => void saveLayout("published"),
-                              style: {
-                                background: "#0f7d52",
-                                border: "none",
-                                borderRadius: 999,
-                                color: "#fff",
-                                cursor: savingStatus ? "not-allowed" : "pointer",
-                                fontSize: 12,
-                                fontWeight: 700,
-                                padding: "7px 10px"
-                              },
-                              type: "button",
-                              children: savingStatus === "published" ? "Publishing..." : "Publish"
-                            }
-                          )
-                        ] }),
-                        saveMessage ? /* @__PURE__ */ jsx("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: saveMessage }) : null,
-                        saveError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: saveError }) : null
-                      ] }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => togglePanel("pageDefaults"),
-                          style: { alignItems: "center", background: "transparent", border: "none", cursor: "pointer", display: "flex", fontSize: 13, fontWeight: 700, justifyContent: "space-between", padding: 0, width: "100%" },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: "Page Defaults" }),
-                            /* @__PURE__ */ jsx("span", { children: panelState.pageDefaults ? "Hide" : "Show" })
-                          ]
-                        }
-                      ),
-                      panelState.pageDefaults ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: [
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Default Page Width",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setPageDefaults((current) => ({
-                                ...current,
-                                pageWidthDefault: event.target.value === "wide" || event.target.value === "full" ? event.target.value : "content"
-                              })),
-                              style: sidebarInputStyle,
-                              value: pageDefaults.pageWidthDefault,
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "content", children: "Content" }),
-                                /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" }),
-                                /* @__PURE__ */ jsx("option", { value: "full", children: "Full" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Applies when section/content width is set to inherit." })
-                      ] }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => togglePanel("addSections"),
-                          style: { alignItems: "center", background: "transparent", border: "none", cursor: "pointer", display: "flex", fontSize: 13, fontWeight: 700, justifyContent: "space-between", padding: 0, width: "100%" },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: "Add Sections" }),
-                            /* @__PURE__ */ jsx("span", { children: panelState.addSections ? "Hide" : "Show" })
-                          ]
-                        }
-                      ),
-                      panelState.addSections ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: [
-                        /* @__PURE__ */ jsxs(
-                          "button",
-                          {
-                            onClick: applyTemplateStarter,
-                            style: {
-                              background: "#0f7d52",
-                              border: "none",
-                              borderRadius: 999,
-                              color: "#fff",
-                              cursor: "pointer",
-                              fontSize: 12,
-                              fontWeight: 700,
-                              padding: "8px 10px"
-                            },
-                            type: "button",
-                            children: [
-                              "Apply ",
-                              pageTemplate,
-                              " Template Starter"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8 }, children: [
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              onChange: (event) => setPresetQuery(event.target.value),
-                              placeholder: "Search presets...",
-                              style: sidebarInputStyle,
-                              type: "text",
-                              value: presetQuery
-                            }
-                          ),
-                          filteredSectionPresets.map((preset) => /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              onClick: () => addSectionPreset(preset.blocks),
-                              style: {
-                                border: "1px solid rgba(13, 74, 55, 0.2)",
-                                borderRadius: 10,
-                                cursor: "pointer",
-                                display: "grid",
-                                gap: 3,
-                                padding: 9,
-                                textAlign: "left"
-                              },
-                              type: "button",
-                              children: [
-                                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700 }, children: preset.title }),
-                                /* @__PURE__ */ jsx("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: preset.description })
-                              ]
-                            },
-                            preset.id
-                          )),
-                          filteredSectionPresets.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "No presets match this search." }) : null
-                        ] })
-                      ] }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => togglePanel("quickAdd"),
-                          style: { alignItems: "center", background: "transparent", border: "none", cursor: "pointer", display: "flex", fontSize: 13, fontWeight: 700, justifyContent: "space-between", padding: 0, width: "100%" },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: "Quick Add Block" }),
-                            /* @__PURE__ */ jsx("span", { children: panelState.quickAdd ? "Hide" : "Show" })
-                          ]
-                        }
-                      ),
-                      panelState.quickAdd ? /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr", marginTop: 10 }, children: quickAddBlockTypes.map((type) => /* @__PURE__ */ jsxs(
-                        "button",
+                        },
+                        panel.key
+                      );
+                    });
+                    return sidebarOpen ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", maxHeight: "calc(100vh - 90px)", overflow: "hidden" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
                         {
-                          onClick: () => addBlockByType(type),
                           style: {
-                            border: "1px solid rgba(13, 74, 55, 0.2)",
-                            borderRadius: 10,
-                            cursor: "pointer",
-                            fontSize: 12,
-                            fontWeight: 600,
-                            padding: "8px 7px"
+                            alignItems: "center",
+                            background: "linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0))",
+                            borderBottom: "1px solid rgba(13, 74, 55, 0.12)",
+                            display: "flex",
+                            gap: 8,
+                            padding: "10px 10px"
                           },
-                          type: "button",
-                          children: [
-                            "+ ",
-                            blockTypeLabels[type] || type
-                          ]
-                        },
-                        type
-                      )) }) : null
-                    ] }),
-                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => togglePanel("selected"),
-                          style: { alignItems: "center", background: "transparent", border: "none", cursor: "pointer", display: "flex", fontSize: 13, fontWeight: 700, justifyContent: "space-between", padding: 0, width: "100%" },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: "Selected Section" }),
-                            /* @__PURE__ */ jsx("span", { children: selectedIndex !== null ? `#${selectedIndex + 1}` : "None" })
-                          ]
+                          children: tabs
                         }
                       ),
-                      panelState.selected ? /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: selectedBlock ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: blockTypeLabels[selectedType] || selectedType }),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: selectedIndex === null || selectedIndex <= 0,
-                              onClick: () => moveSelectedBlock("up"),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Move Up"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              disabled: selectedIndex === null || selectedIndex >= layout.length - 1,
-                              onClick: () => moveSelectedBlock("down"),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Move Down"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: duplicateSelectedBlock,
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Duplicate"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: removeSelectedBlock,
-                              style: {
-                                background: "#8d1d1d",
-                                border: "none",
-                                borderRadius: 999,
-                                color: "#fff",
-                                cursor: "pointer",
-                                fontSize: 12,
-                                padding: "7px 10px"
-                              },
-                              type: "button",
-                              children: "Remove"
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
-                          "Section width follows ",
-                          /* @__PURE__ */ jsx("strong", { children: "Page Defaults" }),
-                          " for a consistent page layout."
-                        ] }),
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Content Width",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("contentWidth", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.contentWidth, "inherit"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "inherit", children: "Inherit Page Default" }),
-                                /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" }),
-                                /* @__PURE__ */ jsx("option", { value: "content", children: "Content" }),
-                                /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" }),
-                                /* @__PURE__ */ jsx("option", { value: "full", children: "Full" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Section Vertical Spacing",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("sectionPaddingY", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.sectionPaddingY, "md"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
-                                /* @__PURE__ */ jsx("option", { value: "md", children: "Medium" }),
-                                /* @__PURE__ */ jsx("option", { value: "lg", children: "Large" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Section Background",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("sectionBackgroundMode", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.sectionBackgroundMode, "none"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
-                                /* @__PURE__ */ jsx("option", { value: "color", children: "Color" }),
-                                /* @__PURE__ */ jsx("option", { value: "gradient", children: "Gradient" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        normalizeText(selectedSectionStyle.sectionBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Section Background Color",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              onChange: (event) => setSelectedStyleField("sectionBackgroundColor", event.target.value),
-                              style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                              type: "color",
-                              value: parseColor(selectedSectionStyle.sectionBackgroundColor, "#ffffff")
-                            }
-                          )
-                        ] }) : null,
-                        normalizeText(selectedSectionStyle.sectionBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Section Gradient Preset",
+                      /* @__PURE__ */ jsxs("div", { style: { display: "grid", overflowY: "auto", padding: 12 }, children: [
+                        activeSidebarPanel === "pageDefaults" ? /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
+                          /* @__PURE__ */ jsxs("div", { style: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+                            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 800 }, children: "Page Defaults" }),
                             /* @__PURE__ */ jsx(
-                              "select",
+                              "button",
                               {
-                                onChange: (event) => applyGradientPreset("section", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedSectionStyle.sectionGradientPreset, "forest"),
-                                children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx("option", { value: preset, children: preset }, preset))
+                                onClick: collapseSidebar,
+                                style: {
+                                  background: "transparent",
+                                  border: "none",
+                                  color: "var(--ink-700)",
+                                  cursor: "pointer",
+                                  fontSize: 12,
+                                  fontWeight: 700,
+                                  padding: 0
+                                },
+                                type: "button",
+                                children: "Hide"
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
+                          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: [
                             /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "From",
-                              /* @__PURE__ */ jsx(
-                                "input",
+                              "Default Page Width",
+                              /* @__PURE__ */ jsxs(
+                                "select",
                                 {
-                                  onChange: (event) => setSelectedStyleField("sectionGradientFrom", event.target.value),
-                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                  type: "color",
-                                  value: parseColor(selectedSectionStyle.sectionGradientFrom, "#124a37")
+                                  onChange: (event) => setPageDefaults((current) => ({
+                                    ...current,
+                                    pageWidthDefault: event.target.value === "wide" || event.target.value === "full" ? event.target.value : "content"
+                                  })),
+                                  style: sidebarInputStyle,
+                                  value: pageDefaults.pageWidthDefault,
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "content", children: "Content" }),
+                                    /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" }),
+                                    /* @__PURE__ */ jsx("option", { value: "full", children: "Full" })
+                                  ]
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "To",
-                              /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  onChange: (event) => setSelectedStyleField("sectionGradientTo", event.target.value),
-                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                  type: "color",
-                                  value: parseColor(selectedSectionStyle.sectionGradientTo, "#1f684f")
-                                }
-                              )
-                            ] })
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Angle",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                max: 360,
-                                min: 0,
-                                onChange: (event) => setSelectedStyleField("sectionGradientAngle", event.target.value),
-                                style: sidebarInputStyle,
-                                type: "number",
-                                value: parseAngle(selectedSectionStyle.sectionGradientAngle, "135")
-                              }
-                            )
+                            /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Applies when section/content width is set to inherit." })
                           ] })
                         ] }) : null,
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Content Background",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("contentBackgroundMode", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.contentBackgroundMode, "none"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
-                                /* @__PURE__ */ jsx("option", { value: "color", children: "Color" }),
-                                /* @__PURE__ */ jsx("option", { value: "gradient", children: "Gradient" })
-                              ]
-                            }
-                          )
-                        ] }),
-                        normalizeText(selectedSectionStyle.contentBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Content Background Color",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              onChange: (event) => setSelectedStyleField("contentBackgroundColor", event.target.value),
-                              style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                              type: "color",
-                              value: parseColor(selectedSectionStyle.contentBackgroundColor, "#ffffff")
-                            }
-                          )
-                        ] }) : null,
-                        normalizeText(selectedSectionStyle.contentBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Content Gradient Preset",
+                        activeSidebarPanel === "addSections" ? /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
+                          /* @__PURE__ */ jsxs("div", { style: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+                            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 800 }, children: "Add Sections" }),
                             /* @__PURE__ */ jsx(
-                              "select",
+                              "button",
                               {
-                                onChange: (event) => applyGradientPreset("content", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedSectionStyle.contentGradientPreset, "none"),
-                                children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx("option", { value: preset, children: preset }, preset))
+                                onClick: collapseSidebar,
+                                style: {
+                                  background: "transparent",
+                                  border: "none",
+                                  color: "var(--ink-700)",
+                                  cursor: "pointer",
+                                  fontSize: 12,
+                                  fontWeight: 700,
+                                  padding: 0
+                                },
+                                type: "button",
+                                children: "Hide"
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
-                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "From",
+                          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 10, marginTop: 10 }, children: [
+                            /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                onClick: applyTemplateStarter,
+                                style: {
+                                  background: "#0f7d52",
+                                  border: "none",
+                                  borderRadius: 999,
+                                  color: "#fff",
+                                  cursor: "pointer",
+                                  fontSize: 12,
+                                  fontWeight: 700,
+                                  padding: "8px 10px"
+                                },
+                                type: "button",
+                                children: [
+                                  "Apply ",
+                                  pageTemplate,
+                                  " Template Starter"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8 }, children: [
                               /* @__PURE__ */ jsx(
                                 "input",
                                 {
-                                  onChange: (event) => setSelectedStyleField("contentGradientFrom", event.target.value),
-                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                  type: "color",
-                                  value: parseColor(selectedSectionStyle.contentGradientFrom, "#ffffff")
+                                  onChange: (event) => setPresetQuery(event.target.value),
+                                  placeholder: "Search section presets...",
+                                  style: sidebarInputStyle,
+                                  type: "text",
+                                  value: presetQuery
                                 }
-                              )
+                              ),
+                              filteredSectionPresets.map((preset) => /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  onClick: () => addSectionPreset(preset.blocks),
+                                  style: {
+                                    border: "1px solid rgba(13, 74, 55, 0.2)",
+                                    borderRadius: 10,
+                                    cursor: "pointer",
+                                    display: "grid",
+                                    gap: 3,
+                                    padding: 9,
+                                    textAlign: "left"
+                                  },
+                                  type: "button",
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700 }, children: preset.title }),
+                                    /* @__PURE__ */ jsx("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: preset.description })
+                                  ]
+                                },
+                                preset.id
+                              )),
+                              filteredSectionPresets.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "No presets match this search." }) : null
                             ] }),
-                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "To",
-                              /* @__PURE__ */ jsx(
-                                "input",
+                            /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid rgba(13, 74, 55, 0.12)", marginTop: 2, paddingTop: 10 }, children: [
+                              /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11, fontWeight: 800, textTransform: "uppercase" }, children: "Quick Add Blocks" }),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr", marginTop: 8 }, children: quickAddBlockTypes.map((type) => /* @__PURE__ */ jsxs(
+                                "button",
                                 {
-                                  onChange: (event) => setSelectedStyleField("contentGradientTo", event.target.value),
-                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                  type: "color",
-                                  value: parseColor(selectedSectionStyle.contentGradientTo, "#f4f6f2")
-                                }
-                              )
+                                  onClick: () => addBlockByType(type),
+                                  style: {
+                                    border: "1px solid rgba(13, 74, 55, 0.2)",
+                                    borderRadius: 10,
+                                    cursor: "pointer",
+                                    fontSize: 12,
+                                    fontWeight: 600,
+                                    padding: "8px 7px"
+                                  },
+                                  type: "button",
+                                  children: [
+                                    "+ ",
+                                    blockTypeLabels[type] || type
+                                  ]
+                                },
+                                type
+                              )) })
                             ] })
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Angle",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                max: 360,
-                                min: 0,
-                                onChange: (event) => setSelectedStyleField("contentGradientAngle", event.target.value),
-                                style: sidebarInputStyle,
-                                type: "number",
-                                value: parseAngle(selectedSectionStyle.contentGradientAngle, "135")
-                              }
-                            )
                           ] })
                         ] }) : null,
-                        selectedType === "hero" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Variant",
-                            /* @__PURE__ */ jsxs(
-                              "select",
-                              {
-                                onChange: (event) => updateSelectedField("variant", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedBlock.variant, "default"),
-                                children: [
-                                  /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                                  /* @__PURE__ */ jsx("option", { value: "centered", children: "Centered" })
-                                ]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Background Image URL",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateSelectedField("backgroundImageURL", event.target.value),
-                                placeholder: "https://...",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(selectedBlock.backgroundImageURL)
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Background Color",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
-                                style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                type: "color",
-                                value: parseColor(selectedBlock.backgroundColor, "#124a37")
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Upload Hero Background Image",
+                        activeSidebarPanel === "selected" ? /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
+                          /* @__PURE__ */ jsxs("div", { style: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+                            /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, fontWeight: 800 }, children: [
+                              "Selected Section ",
+                              selectedIndex !== null ? `#${selectedIndex + 1}` : ""
+                            ] }),
                             /* @__PURE__ */ jsx(
-                              "input",
+                              "button",
                               {
-                                accept: "image/*",
-                                disabled: uploadingTarget !== null,
-                                onChange: (event) => {
-                                  const file = event.currentTarget.files?.[0];
-                                  if (file) {
-                                    void uploadMediaForSelected({ kind: "hero" }, file);
-                                  }
-                                  event.currentTarget.value = "";
+                                onClick: collapseSidebar,
+                                style: {
+                                  background: "transparent",
+                                  border: "none",
+                                  color: "var(--ink-700)",
+                                  cursor: "pointer",
+                                  fontSize: 12,
+                                  fontWeight: 700,
+                                  padding: 0
                                 },
-                                style: sidebarInputStyle,
-                                type: "file"
-                              }
-                            )
-                          ] })
-                        ] }) : null,
-                        selectedType === "featureGrid" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Variant",
-                            /* @__PURE__ */ jsxs(
-                              "select",
-                              {
-                                onChange: (event) => updateSelectedField("variant", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedBlock.variant, "cards"),
-                                children: [
-                                  /* @__PURE__ */ jsx("option", { value: "cards", children: "Cards" }),
-                                  /* @__PURE__ */ jsx("option", { value: "highlight", children: "Highlight" })
-                                ]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Highlight Background Color",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
-                                style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                type: "color",
-                                value: parseColor(selectedBlock.backgroundColor, "#1f684f")
+                                type: "button",
+                                children: "Hide"
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: () => appendItemToSelected("items", {
-                                description: "Describe this feature.",
-                                icon: "04",
-                                title: "New Feature"
-                              }),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Add Feature Item"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
-                            /* @__PURE__ */ jsxs("div", { style: { color: "var(--ink-700)", fontSize: 11, fontWeight: 700 }, children: [
-                              "Item ",
-                              itemIndex + 1
-                            ] }),
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "title", event.target.value),
-                                placeholder: "Title",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.title)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "icon", event.target.value),
-                                placeholder: "Icon",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.icon)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "textarea",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
-                                placeholder: "Description",
-                                style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
-                                value: normalizeText(item.description)
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "Item Image",
+                          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8, marginTop: 10 }, children: selectedBlock ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: blockTypeLabels[selectedType] || selectedType }),
+                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: [
                               /* @__PURE__ */ jsx(
-                                "input",
+                                "button",
                                 {
-                                  accept: "image/*",
-                                  disabled: uploadingTarget !== null,
-                                  onChange: (event) => {
-                                    const file = event.currentTarget.files?.[0];
-                                    if (file) {
-                                      void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
-                                    }
-                                    event.currentTarget.value = "";
+                                  disabled: selectedIndex === null || selectedIndex <= 0,
+                                  onClick: () => moveSelectedBlock("up"),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Move Up"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  disabled: selectedIndex === null || selectedIndex >= layout.length - 1,
+                                  onClick: () => moveSelectedBlock("down"),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Move Down"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: duplicateSelectedBlock,
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Duplicate"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: removeSelectedBlock,
+                                  style: {
+                                    background: "#8d1d1d",
+                                    border: "none",
+                                    borderRadius: 999,
+                                    color: "#fff",
+                                    cursor: "pointer",
+                                    fontSize: 12,
+                                    padding: "7px 10px"
                                   },
+                                  type: "button",
+                                  children: "Remove"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
+                              "Section width follows ",
+                              /* @__PURE__ */ jsx("strong", { children: "Page Defaults" }),
+                              " for a consistent page layout."
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Content Width",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => setSelectedStyleField("contentWidth", event.target.value),
                                   style: sidebarInputStyle,
-                                  type: "file"
+                                  value: normalizeText(selectedSectionStyle.contentWidth, "inherit"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "inherit", children: "Inherit Page Default" }),
+                                    /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" }),
+                                    /* @__PURE__ */ jsx("option", { value: "content", children: "Content" }),
+                                    /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" }),
+                                    /* @__PURE__ */ jsx("option", { value: "full", children: "Full" })
+                                  ]
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: () => removeItemFromSelected("items", itemIndex),
-                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                                type: "button",
-                                children: "Remove Item"
-                              }
-                            )
-                          ] }, `feature-item-control-${itemIndex}`)) })
-                        ] }) : null,
-                        selectedType === "stats" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: () => appendItemToSelected("items", {
-                                description: "Add context for this metric.",
-                                label: "Metric",
-                                value: "00"
-                              }),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Add Stat"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "value", event.target.value),
-                                placeholder: "Value",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.value)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
-                                placeholder: "Label",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.label)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
-                                placeholder: "Description",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.description)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: () => removeItemFromSelected("items", itemIndex),
-                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                                type: "button",
-                                children: "Remove Item"
-                              }
-                            )
-                          ] }, `stats-item-control-${itemIndex}`)) })
-                        ] }) : null,
-                        selectedType === "logoWall" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: () => appendItemToSelected("items", {
-                                href: "",
-                                name: "Partner"
-                              }),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Add Logo"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
-                                placeholder: "Partner Name",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.name)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "href", event.target.value),
-                                placeholder: "https://example.com",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.href)
-                              }
-                            ),
                             /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "Logo Image",
-                              /* @__PURE__ */ jsx(
-                                "input",
+                              "Section Vertical Spacing",
+                              /* @__PURE__ */ jsxs(
+                                "select",
                                 {
-                                  accept: "image/*",
-                                  disabled: uploadingTarget !== null,
-                                  onChange: (event) => {
-                                    const file = event.currentTarget.files?.[0];
-                                    if (file) {
-                                      void uploadMediaForSelected({ field: "media", itemIndex, kind: "logoWallItem" }, file);
-                                    }
-                                    event.currentTarget.value = "";
-                                  },
+                                  onChange: (event) => setSelectedStyleField("sectionPaddingY", event.target.value),
                                   style: sidebarInputStyle,
-                                  type: "file"
+                                  value: normalizeText(selectedSectionStyle.sectionPaddingY, "md"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+                                    /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
+                                    /* @__PURE__ */ jsx("option", { value: "md", children: "Medium" }),
+                                    /* @__PURE__ */ jsx("option", { value: "lg", children: "Large" })
+                                  ]
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: () => removeItemFromSelected("items", itemIndex),
-                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                                type: "button",
-                                children: "Remove Item"
-                              }
-                            )
-                          ] }, `logo-item-control-${itemIndex}`)) })
-                        ] }) : null,
-                        selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: () => appendItemToSelected("items", {
-                                description: "Describe the outcome.",
-                                label: "Project"
-                              }),
-                              style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                              type: "button",
-                              children: "Add Before/After Pair"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
-                                placeholder: "Project Label",
-                                style: sidebarInputStyle,
-                                type: "text",
-                                value: normalizeText(item.label)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "textarea",
-                              {
-                                onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
-                                placeholder: "Description",
-                                style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
-                                value: normalizeText(item.description)
-                              }
-                            ),
                             /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "Before Image",
+                              "Section Horizontal Spacing",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => setSelectedStyleField("sectionPaddingX", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeText(selectedSectionStyle.sectionPaddingX, "inherit"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "inherit", children: "Inherit (Edge-to-Edge on Full Width)" }),
+                                    /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+                                    /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
+                                    /* @__PURE__ */ jsx("option", { value: "md", children: "Medium" }),
+                                    /* @__PURE__ */ jsx("option", { value: "lg", children: "Large" })
+                                  ]
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Section Background",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => setSelectedStyleField("sectionBackgroundMode", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeText(selectedSectionStyle.sectionBackgroundMode, "none"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+                                    /* @__PURE__ */ jsx("option", { value: "color", children: "Color" }),
+                                    /* @__PURE__ */ jsx("option", { value: "gradient", children: "Gradient" })
+                                  ]
+                                }
+                              )
+                            ] }),
+                            normalizeText(selectedSectionStyle.sectionBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Section Background Color",
                               /* @__PURE__ */ jsx(
                                 "input",
                                 {
-                                  accept: "image/*",
-                                  disabled: uploadingTarget !== null,
-                                  onChange: (event) => {
-                                    const file = event.currentTarget.files?.[0];
-                                    if (file) {
-                                      void uploadMediaForSelected({ field: "beforeMedia", itemIndex, kind: "beforeAfterItem" }, file);
+                                  onChange: (event) => setSelectedStyleField("sectionBackgroundColor", event.target.value),
+                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                  type: "color",
+                                  value: parseColor(selectedSectionStyle.sectionBackgroundColor, "#ffffff")
+                                }
+                              )
+                            ] }) : null,
+                            normalizeText(selectedSectionStyle.sectionBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Section Gradient Preset",
+                                /* @__PURE__ */ jsx(
+                                  "select",
+                                  {
+                                    onChange: (event) => applyGradientPreset("section", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedSectionStyle.sectionGradientPreset, "forest"),
+                                    children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx("option", { value: preset, children: preset }, preset))
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "From",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      onChange: (event) => setSelectedStyleField("sectionGradientFrom", event.target.value),
+                                      style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                      type: "color",
+                                      value: parseColor(selectedSectionStyle.sectionGradientFrom, "#124a37")
                                     }
-                                    event.currentTarget.value = "";
-                                  },
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "To",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      onChange: (event) => setSelectedStyleField("sectionGradientTo", event.target.value),
+                                      style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                      type: "color",
+                                      value: parseColor(selectedSectionStyle.sectionGradientTo, "#1f684f")
+                                    }
+                                  )
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Angle",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    max: 360,
+                                    min: 0,
+                                    onChange: (event) => setSelectedStyleField("sectionGradientAngle", event.target.value),
+                                    style: sidebarInputStyle,
+                                    type: "number",
+                                    value: parseAngle(selectedSectionStyle.sectionGradientAngle, "135")
+                                  }
+                                )
+                              ] })
+                            ] }) : null,
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Content Background",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => setSelectedStyleField("contentBackgroundMode", event.target.value),
                                   style: sidebarInputStyle,
-                                  type: "file"
+                                  value: normalizeText(selectedSectionStyle.contentBackgroundMode, "none"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
+                                    /* @__PURE__ */ jsx("option", { value: "color", children: "Color" }),
+                                    /* @__PURE__ */ jsx("option", { value: "gradient", children: "Gradient" })
+                                  ]
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                              "After Image",
+                            normalizeText(selectedSectionStyle.contentBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Content Background Color",
                               /* @__PURE__ */ jsx(
                                 "input",
                                 {
-                                  accept: "image/*",
-                                  disabled: uploadingTarget !== null,
-                                  onChange: (event) => {
-                                    const file = event.currentTarget.files?.[0];
-                                    if (file) {
-                                      void uploadMediaForSelected({ field: "afterMedia", itemIndex, kind: "beforeAfterItem" }, file);
+                                  onChange: (event) => setSelectedStyleField("contentBackgroundColor", event.target.value),
+                                  style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                  type: "color",
+                                  value: parseColor(selectedSectionStyle.contentBackgroundColor, "#ffffff")
+                                }
+                              )
+                            ] }) : null,
+                            normalizeText(selectedSectionStyle.contentBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Content Gradient Preset",
+                                /* @__PURE__ */ jsx(
+                                  "select",
+                                  {
+                                    onChange: (event) => applyGradientPreset("content", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedSectionStyle.contentGradientPreset, "none"),
+                                    children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx("option", { value: preset, children: preset }, preset))
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "From",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      onChange: (event) => setSelectedStyleField("contentGradientFrom", event.target.value),
+                                      style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                      type: "color",
+                                      value: parseColor(selectedSectionStyle.contentGradientFrom, "#ffffff")
                                     }
-                                    event.currentTarget.value = "";
-                                  },
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "To",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      onChange: (event) => setSelectedStyleField("contentGradientTo", event.target.value),
+                                      style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                      type: "color",
+                                      value: parseColor(selectedSectionStyle.contentGradientTo, "#f4f6f2")
+                                    }
+                                  )
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Angle",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    max: 360,
+                                    min: 0,
+                                    onChange: (event) => setSelectedStyleField("contentGradientAngle", event.target.value),
+                                    style: sidebarInputStyle,
+                                    type: "number",
+                                    value: parseAngle(selectedSectionStyle.contentGradientAngle, "135")
+                                  }
+                                )
+                              ] })
+                            ] }) : null,
+                            selectedType === "hero" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Variant",
+                                /* @__PURE__ */ jsxs(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateSelectedField("variant", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedBlock.variant, "default"),
+                                    children: [
+                                      /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
+                                      /* @__PURE__ */ jsx("option", { value: "centered", children: "Centered" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Hero Height",
+                                /* @__PURE__ */ jsxs(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateSelectedField("heroHeight", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeHeroHeight(selectedBlock.heroHeight),
+                                    children: [
+                                      /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
+                                      /* @__PURE__ */ jsx("option", { value: "md", children: "Medium (Half Screen)" }),
+                                      /* @__PURE__ */ jsx("option", { value: "full", children: "Full Screen" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { style: { ...sidebarSectionStyle, display: "grid", gap: 8 }, children: [
+                                /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: "Hero Image" }),
+                                /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedHeroMedia ? `${selectedHeroMedia.filename || `Media #${selectedHeroMedia.id}`}${selectedHeroMedia.alt ? ` (${selectedHeroMedia.alt})` : ""}` : "No image selected." }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Choose from Media Library",
+                                  /* @__PURE__ */ jsxs(
+                                    "select",
+                                    {
+                                      onChange: (event) => setHeroMediaFromLibrary(event.target.value),
+                                      style: sidebarInputStyle,
+                                      value: selectedHeroMediaID,
+                                      children: [
+                                        /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                        mediaLibrary.map((item) => /* @__PURE__ */ jsx("option", { value: String(item.id), children: mediaLabel(item) }, String(item.id)))
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                mediaLibraryLoading ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
+                                mediaLibraryError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    disabled: !selectedHeroMedia && !selectedHeroMediaID,
+                                    onClick: clearHeroMedia,
+                                    style: {
+                                      borderRadius: 999,
+                                      cursor: selectedHeroMedia || selectedHeroMediaID ? "pointer" : "not-allowed",
+                                      fontSize: 12,
+                                      padding: "7px 10px"
+                                    },
+                                    type: "button",
+                                    children: "Remove Hero Image"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Upload Hero Background Image",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      accept: "image/*",
+                                      disabled: uploadingTarget !== null,
+                                      onChange: (event) => {
+                                        const file = event.currentTarget.files?.[0];
+                                        if (file) {
+                                          void uploadMediaForSelected({ kind: "hero" }, file);
+                                        }
+                                        event.currentTarget.value = "";
+                                      },
+                                      style: sidebarInputStyle,
+                                      type: "file"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Image Fit",
+                                  /* @__PURE__ */ jsxs(
+                                    "select",
+                                    {
+                                      onChange: (event) => updateSelectedField("backgroundImageFit", event.target.value),
+                                      style: sidebarInputStyle,
+                                      value: normalizeHeroImageFit(selectedBlock.backgroundImageFit),
+                                      children: [
+                                        /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                        /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Image Corners",
+                                  /* @__PURE__ */ jsxs(
+                                    "select",
+                                    {
+                                      onChange: (event) => updateSelectedField("backgroundImageCornerStyle", event.target.value),
+                                      style: sidebarInputStyle,
+                                      value: normalizeHeroImageCornerStyle(
+                                        selectedBlock.backgroundImageCornerStyle,
+                                        selectedBlock.backgroundImageFit
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                                        /* @__PURE__ */ jsx("option", { value: "square", children: "Square" })
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Image Position",
+                                  /* @__PURE__ */ jsxs(
+                                    "select",
+                                    {
+                                      onChange: (event) => updateSelectedField("backgroundImagePosition", event.target.value),
+                                      style: sidebarInputStyle,
+                                      value: normalizeHeroImagePosition(selectedBlock.backgroundImagePosition),
+                                      children: [
+                                        /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                        /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                        /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                        /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                        /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                      ]
+                                    }
+                                  )
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Background Color",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
+                                    style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                    type: "color",
+                                    value: parseColor(selectedBlock.backgroundColor, "#ffffff")
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => updateSelectedField("backgroundColor", ""),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Clear Hero Background Color"
+                                }
+                              )
+                            ] }) : null,
+                            selectedType === "featureGrid" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Variant",
+                                /* @__PURE__ */ jsxs(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateSelectedField("variant", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedBlock.variant, "cards"),
+                                    children: [
+                                      /* @__PURE__ */ jsx("option", { value: "cards", children: "Cards" }),
+                                      /* @__PURE__ */ jsx("option", { value: "highlight", children: "Highlight" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Highlight Background Color",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
+                                    style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                    type: "color",
+                                    value: parseColor(selectedBlock.backgroundColor, "#1f684f")
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    description: "Describe this feature.",
+                                    icon: "04",
+                                    imageCornerStyle: "rounded",
+                                    imageFit: "cover",
+                                    imagePosition: "center",
+                                    title: "New Feature"
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Feature Item"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
+                                /* @__PURE__ */ jsxs("div", { style: { color: "var(--ink-700)", fontSize: 11, fontWeight: 700 }, children: [
+                                  "Item ",
+                                  itemIndex + 1
+                                ] }),
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "title", event.target.value),
+                                    placeholder: "Title",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.title)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "icon", event.target.value),
+                                    placeholder: "Icon",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.icon)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "textarea",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
+                                    placeholder: "Description",
+                                    style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
+                                    value: normalizeText(item.description)
+                                  }
+                                ),
+                                (() => {
+                                  const itemMedia = resolveMediaLibraryItemFromValue(item.media);
+                                  const itemMediaID = getRelationID(item.media);
+                                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: itemMedia ? `Selected image: ${mediaLabel(itemMedia)}` : "No item image selected." }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Choose from Media Library",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
+                                          style: sidebarInputStyle,
+                                          value: itemMediaID !== null ? String(itemMediaID) : "",
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                            mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    mediaLibraryLoading ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
+                                    mediaLibraryError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        disabled: !itemMedia && itemMediaID === null,
+                                        onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
+                                        style: {
+                                          borderRadius: 999,
+                                          cursor: itemMedia || itemMediaID !== null ? "pointer" : "not-allowed",
+                                          fontSize: 12,
+                                          padding: "7px 10px"
+                                        },
+                                        type: "button",
+                                        children: "Remove Item Image"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Fit",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageFit",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageFit(item.imageFit),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                            /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Corners",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageCornerStyle",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageCornerStyle(item.imageCornerStyle),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                                            /* @__PURE__ */ jsx("option", { value: "square", children: "Square" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Position",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imagePosition",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImagePosition(item.imagePosition),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                            /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                            /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                            /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                            /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                          ]
+                                        }
+                                      )
+                                    ] })
+                                  ] });
+                                })(),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Upload Item Image",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      accept: "image/*",
+                                      disabled: uploadingTarget !== null,
+                                      onChange: (event) => {
+                                        const file = event.currentTarget.files?.[0];
+                                        if (file) {
+                                          void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
+                                        }
+                                        event.currentTarget.value = "";
+                                      },
+                                      style: sidebarInputStyle,
+                                      type: "file"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => removeItemFromSelected("items", itemIndex),
+                                    style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                    type: "button",
+                                    children: "Remove Item"
+                                  }
+                                )
+                              ] }, `feature-item-control-${itemIndex}`)) })
+                            ] }) : null,
+                            selectedType === "stats" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    description: "Add context for this metric.",
+                                    label: "Metric",
+                                    value: "00"
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Stat"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "value", event.target.value),
+                                    placeholder: "Value",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.value)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
+                                    placeholder: "Label",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.label)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
+                                    placeholder: "Description",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.description)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => removeItemFromSelected("items", itemIndex),
+                                    style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                    type: "button",
+                                    children: "Remove Item"
+                                  }
+                                )
+                              ] }, `stats-item-control-${itemIndex}`)) })
+                            ] }) : null,
+                            selectedType === "logoWall" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    href: "",
+                                    imageCornerStyle: "rounded",
+                                    imageFit: "contain",
+                                    imagePosition: "center",
+                                    name: "Partner"
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Logo"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
+                                    placeholder: "Partner Name",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.name)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "href", event.target.value),
+                                    placeholder: "https://example.com",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.href)
+                                  }
+                                ),
+                                (() => {
+                                  const logoMedia = resolveMediaLibraryItemFromValue(item.media);
+                                  const logoMediaID = getRelationID(item.media);
+                                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: logoMedia ? `Selected logo: ${mediaLabel(logoMedia)}` : "No logo image selected." }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Choose from Media Library",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
+                                          style: sidebarInputStyle,
+                                          value: logoMediaID !== null ? String(logoMediaID) : "",
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                            mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    mediaLibraryLoading ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
+                                    mediaLibraryError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        disabled: !logoMedia && logoMediaID === null,
+                                        onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
+                                        style: {
+                                          borderRadius: 999,
+                                          cursor: logoMedia || logoMediaID !== null ? "pointer" : "not-allowed",
+                                          fontSize: 12,
+                                          padding: "7px 10px"
+                                        },
+                                        type: "button",
+                                        children: "Remove Logo Image"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Fit",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageFit",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageFit(item.imageFit),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                            /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Corners",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageCornerStyle",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageCornerStyle(item.imageCornerStyle),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                                            /* @__PURE__ */ jsx("option", { value: "square", children: "Square" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Position",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imagePosition",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImagePosition(item.imagePosition),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                            /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                            /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                            /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                            /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                          ]
+                                        }
+                                      )
+                                    ] })
+                                  ] });
+                                })(),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Upload Logo Image",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      accept: "image/*",
+                                      disabled: uploadingTarget !== null,
+                                      onChange: (event) => {
+                                        const file = event.currentTarget.files?.[0];
+                                        if (file) {
+                                          void uploadMediaForSelected({ field: "media", itemIndex, kind: "logoWallItem" }, file);
+                                        }
+                                        event.currentTarget.value = "";
+                                      },
+                                      style: sidebarInputStyle,
+                                      type: "file"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => removeItemFromSelected("items", itemIndex),
+                                    style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                    type: "button",
+                                    children: "Remove Item"
+                                  }
+                                )
+                              ] }, `logo-item-control-${itemIndex}`)) })
+                            ] }) : null,
+                            selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  onClick: () => appendItemToSelected("items", {
+                                    description: "Describe the outcome.",
+                                    imageCornerStyle: "rounded",
+                                    imageFit: "cover",
+                                    imagePosition: "center",
+                                    label: "Project"
+                                  }),
+                                  style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                  type: "button",
+                                  children: "Add Before/After Pair"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { style: { border: "1px solid rgba(13, 74, 55, 0.16)", borderRadius: 10, display: "grid", gap: 6, padding: 8 }, children: [
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
+                                    placeholder: "Project Label",
+                                    style: sidebarInputStyle,
+                                    type: "text",
+                                    value: normalizeText(item.label)
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "textarea",
+                                  {
+                                    onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
+                                    placeholder: "Description",
+                                    style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
+                                    value: normalizeText(item.description)
+                                  }
+                                ),
+                                (() => {
+                                  const beforeMedia = resolveMediaLibraryItemFromValue(item.beforeMedia);
+                                  const beforeMediaID = getRelationID(item.beforeMedia);
+                                  const afterMedia = resolveMediaLibraryItemFromValue(item.afterMedia);
+                                  const afterMediaID = getRelationID(item.afterMedia);
+                                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: beforeMedia ? `Before image: ${mediaLabel(beforeMedia)}` : "No before image selected." }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Choose Before Image",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", event.target.value),
+                                          style: sidebarInputStyle,
+                                          value: beforeMediaID !== null ? String(beforeMediaID) : "",
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                            mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        disabled: !beforeMedia && beforeMediaID === null,
+                                        onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", ""),
+                                        style: {
+                                          borderRadius: 999,
+                                          cursor: beforeMedia || beforeMediaID !== null ? "pointer" : "not-allowed",
+                                          fontSize: 12,
+                                          padding: "7px 10px"
+                                        },
+                                        type: "button",
+                                        children: "Remove Before Image"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: afterMedia ? `After image: ${mediaLabel(afterMedia)}` : "No after image selected." }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Choose After Image",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", event.target.value),
+                                          style: sidebarInputStyle,
+                                          value: afterMediaID !== null ? String(afterMediaID) : "",
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                            mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        disabled: !afterMedia && afterMediaID === null,
+                                        onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", ""),
+                                        style: {
+                                          borderRadius: 999,
+                                          cursor: afterMedia || afterMediaID !== null ? "pointer" : "not-allowed",
+                                          fontSize: 12,
+                                          padding: "7px 10px"
+                                        },
+                                        type: "button",
+                                        children: "Remove After Image"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Fit",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageFit",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageFit(item.imageFit),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                            /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Corners",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imageCornerStyle",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImageCornerStyle(item.imageCornerStyle),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                                            /* @__PURE__ */ jsx("option", { value: "square", children: "Square" })
+                                          ]
+                                        }
+                                      )
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                      "Image Position",
+                                      /* @__PURE__ */ jsxs(
+                                        "select",
+                                        {
+                                          onChange: (event) => updateArrayItemField(
+                                            selectedIndex ?? 0,
+                                            "items",
+                                            itemIndex,
+                                            "imagePosition",
+                                            event.target.value
+                                          ),
+                                          style: sidebarInputStyle,
+                                          value: normalizeImagePosition(item.imagePosition),
+                                          children: [
+                                            /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                            /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                            /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                            /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                            /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                          ]
+                                        }
+                                      )
+                                    ] })
+                                  ] });
+                                })(),
+                                mediaLibraryLoading ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
+                                mediaLibraryError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Upload Before Image",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      accept: "image/*",
+                                      disabled: uploadingTarget !== null,
+                                      onChange: (event) => {
+                                        const file = event.currentTarget.files?.[0];
+                                        if (file) {
+                                          void uploadMediaForSelected({ field: "beforeMedia", itemIndex, kind: "beforeAfterItem" }, file);
+                                        }
+                                        event.currentTarget.value = "";
+                                      },
+                                      style: sidebarInputStyle,
+                                      type: "file"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                  "Upload After Image",
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      accept: "image/*",
+                                      disabled: uploadingTarget !== null,
+                                      onChange: (event) => {
+                                        const file = event.currentTarget.files?.[0];
+                                        if (file) {
+                                          void uploadMediaForSelected({ field: "afterMedia", itemIndex, kind: "beforeAfterItem" }, file);
+                                        }
+                                        event.currentTarget.value = "";
+                                      },
+                                      style: sidebarInputStyle,
+                                      type: "file"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    onClick: () => removeItemFromSelected("items", itemIndex),
+                                    style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                    type: "button",
+                                    children: "Remove Item"
+                                  }
+                                )
+                              ] }, `before-after-item-control-${itemIndex}`)) })
+                            ] }) : null,
+                            selectedType === "cta" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Style",
+                                /* @__PURE__ */ jsxs(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateSelectedField("style", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedBlock.style, "light"),
+                                    children: [
+                                      /* @__PURE__ */ jsx("option", { value: "light", children: "Light" }),
+                                      /* @__PURE__ */ jsx("option", { value: "dark", children: "Dark" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Background Color",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
+                                    style: { ...sidebarInputStyle, height: 36, padding: 4 },
+                                    type: "color",
+                                    value: parseColor(selectedBlock.backgroundColor, "#1f684f")
+                                  }
+                                )
+                              ] })
+                            ] }) : null,
+                            selectedType === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Image Size",
+                                /* @__PURE__ */ jsxs(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateSelectedField("size", event.target.value),
+                                    style: sidebarInputStyle,
+                                    value: normalizeText(selectedBlock.size, "default"),
+                                    children: [
+                                      /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
+                                      /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              (() => {
+                                const selectedMedia = resolveMediaLibraryItemFromValue(selectedBlock.image);
+                                const selectedMediaID = getRelationID(selectedBlock.image);
+                                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedMedia ? `Selected image: ${mediaLabel(selectedMedia)}` : "No image selected." }),
+                                  /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Choose from Media Library",
+                                    /* @__PURE__ */ jsxs(
+                                      "select",
+                                      {
+                                        onChange: (event) => setSelectedMediaFieldFromLibrary("image", event.target.value),
+                                        style: sidebarInputStyle,
+                                        value: selectedMediaID !== null ? String(selectedMediaID) : "",
+                                        children: [
+                                          /* @__PURE__ */ jsx("option", { value: "", children: "No image" }),
+                                          mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  mediaLibraryLoading ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
+                                  mediaLibraryError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
+                                  /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      disabled: !selectedMedia && selectedMediaID === null,
+                                      onClick: () => setSelectedMediaFieldFromLibrary("image", ""),
+                                      style: {
+                                        borderRadius: 999,
+                                        cursor: selectedMedia || selectedMediaID !== null ? "pointer" : "not-allowed",
+                                        fontSize: 12,
+                                        padding: "7px 10px"
+                                      },
+                                      type: "button",
+                                      children: "Remove Section Image"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Image Fit",
+                                    /* @__PURE__ */ jsxs(
+                                      "select",
+                                      {
+                                        onChange: (event) => updateSelectedField("imageFit", event.target.value),
+                                        style: sidebarInputStyle,
+                                        value: normalizeImageFit(selectedBlock.imageFit),
+                                        children: [
+                                          /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                          /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Image Corners",
+                                    /* @__PURE__ */ jsxs(
+                                      "select",
+                                      {
+                                        onChange: (event) => updateSelectedField("imageCornerStyle", event.target.value),
+                                        style: sidebarInputStyle,
+                                        value: normalizeImageCornerStyle(selectedBlock.imageCornerStyle),
+                                        children: [
+                                          /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                                          /* @__PURE__ */ jsx("option", { value: "square", children: "Square" })
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                    "Image Position",
+                                    /* @__PURE__ */ jsxs(
+                                      "select",
+                                      {
+                                        onChange: (event) => updateSelectedField("imagePosition", event.target.value),
+                                        style: sidebarInputStyle,
+                                        value: normalizeImagePosition(selectedBlock.imagePosition),
+                                        children: [
+                                          /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                          /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                          /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                          /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                          /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                        ]
+                                      }
+                                    )
+                                  ] })
+                                ] });
+                              })(),
+                              /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                                "Upload Section Image",
+                                /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    accept: "image/*",
+                                    disabled: uploadingTarget !== null,
+                                    onChange: (event) => {
+                                      const file = event.currentTarget.files?.[0];
+                                      if (file) {
+                                        void uploadMediaForSelected({ kind: "media" }, file);
+                                      }
+                                      event.currentTarget.value = "";
+                                    },
+                                    style: sidebarInputStyle,
+                                    type: "file"
+                                  }
+                                )
+                              ] })
+                            ] }) : null,
+                            selectedType === "richText" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Content Width",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("width", event.target.value),
                                   style: sidebarInputStyle,
-                                  type: "file"
+                                  value: normalizeText(selectedBlock.width, "normal"),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal" }),
+                                    /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" })
+                                  ]
                                 }
                               )
-                            ] }),
-                            /* @__PURE__ */ jsx(
+                            ] }) : null,
+                            selectedType === "formEmbed" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Form Type",
+                              /* @__PURE__ */ jsx(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("formType", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeText(selectedBlock.formType, "quote"),
+                                  children: /* @__PURE__ */ jsx("option", { value: "quote", children: "Quote" })
+                                }
+                              )
+                            ] }) : null,
+                            selectedType === "faq" ? /* @__PURE__ */ jsx(
                               "button",
                               {
-                                onClick: () => removeItemFromSelected("items", itemIndex),
+                                onClick: () => appendItemToSelected("items", {
+                                  answer: "Answer this question here.",
+                                  question: "New frequently asked question?"
+                                }),
                                 style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
                                 type: "button",
-                                children: "Remove Item"
-                              }
-                            )
-                          ] }, `before-after-item-control-${itemIndex}`)) })
-                        ] }) : null,
-                        selectedType === "cta" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Style",
-                            /* @__PURE__ */ jsxs(
-                              "select",
-                              {
-                                onChange: (event) => updateSelectedField("style", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedBlock.style, "light"),
-                                children: [
-                                  /* @__PURE__ */ jsx("option", { value: "light", children: "Light" }),
-                                  /* @__PURE__ */ jsx("option", { value: "dark", children: "Dark" })
-                                ]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Background Color",
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
-                                style: { ...sidebarInputStyle, height: 36, padding: 4 },
-                                type: "color",
-                                value: parseColor(selectedBlock.backgroundColor, "#1f684f")
-                              }
-                            )
-                          ] })
-                        ] }) : null,
-                        selectedType === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Image Size",
-                            /* @__PURE__ */ jsxs(
-                              "select",
-                              {
-                                onChange: (event) => updateSelectedField("size", event.target.value),
-                                style: sidebarInputStyle,
-                                value: normalizeText(selectedBlock.size, "default"),
-                                children: [
-                                  /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                                  /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" })
-                                ]
+                                children: "Add FAQ Item"
                               }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                            "Upload Section Image",
-                            /* @__PURE__ */ jsx(
-                              "input",
+                            ) : null,
+                            selectedType === "testimonials" ? /* @__PURE__ */ jsx(
+                              "button",
                               {
-                                accept: "image/*",
-                                disabled: uploadingTarget !== null,
-                                onChange: (event) => {
-                                  const file = event.currentTarget.files?.[0];
-                                  if (file) {
-                                    void uploadMediaForSelected({ kind: "media" }, file);
-                                  }
-                                  event.currentTarget.value = "";
-                                },
-                                style: sidebarInputStyle,
-                                type: "file"
+                                onClick: () => appendItemToSelected("items", {
+                                  location: "City, ST",
+                                  name: "Customer Name",
+                                  quote: "Add testimonial text."
+                                }),
+                                style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
+                                type: "button",
+                                children: "Add Testimonial"
                               }
-                            )
-                          ] })
-                        ] }) : null,
-                        selectedType === "richText" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Content Width",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => updateSelectedField("width", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedBlock.width, "normal"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal" }),
-                                /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" })
-                              ]
-                            }
-                          )
-                        ] }) : null,
-                        selectedType === "formEmbed" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Form Type",
-                          /* @__PURE__ */ jsx(
-                            "select",
-                            {
-                              onChange: (event) => updateSelectedField("formType", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedBlock.formType, "quote"),
-                              children: /* @__PURE__ */ jsx("option", { value: "quote", children: "Quote" })
-                            }
-                          )
-                        ] }) : null,
-                        selectedType === "faq" ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => appendItemToSelected("items", {
-                              answer: "Answer this question here.",
-                              question: "New frequently asked question?"
-                            }),
-                            style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                            type: "button",
-                            children: "Add FAQ Item"
-                          }
-                        ) : null,
-                        selectedType === "testimonials" ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => appendItemToSelected("items", {
-                              location: "City, ST",
-                              name: "Customer Name",
-                              quote: "Add testimonial text."
-                            }),
-                            style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
-                            type: "button",
-                            children: "Add Testimonial"
-                          }
-                        ) : null,
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Upload Alt Text",
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              onChange: (event) => setUploadAltText(event.target.value),
-                              placeholder: "Describe the image",
-                              style: sidebarInputStyle,
-                              type: "text",
-                              value: uploadAltText
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." }),
-                        uploadingTarget ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Uploading image..." }) : null,
-                        uploadMessage ? /* @__PURE__ */ jsx("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
-                        uploadError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: uploadError }) : null
-                      ] }) : /* @__PURE__ */ jsx("p", { style: { color: "var(--ink-700)", fontSize: 12, margin: 0 }, children: "Click a section on the page preview to edit its options here." }) }) : null
-                    ] })
-                  ] }) : null
+                            ) : null,
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Upload Alt Text",
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  onChange: (event) => setUploadAltText(event.target.value),
+                                  placeholder: "Describe the image",
+                                  style: sidebarInputStyle,
+                                  type: "text",
+                                  value: uploadAltText
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." }),
+                            uploadingTarget ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Uploading image..." }) : null,
+                            uploadMessage ? /* @__PURE__ */ jsx("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
+                            uploadError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: uploadError }) : null
+                          ] }) : /* @__PURE__ */ jsx("p", { style: { color: "var(--ink-700)", fontSize: 12, margin: 0 }, children: "Click a section on the page preview to edit its options here." }) })
+                        ] }) : null
+                      ] })
+                    ] }) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          alignContent: "start",
+                          background: "linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0))",
+                          display: "grid",
+                          gap: 10,
+                          justifyItems: "center",
+                          maxHeight: "calc(100vh - 90px)",
+                          overflow: "hidden",
+                          padding: "10px 6px"
+                        },
+                        children: tabs
+                      }
+                    );
+                  })()
                 ]
               }
             )