@orion-studios/payload-studio 0.5.0-beta.83 → 0.5.0-beta.85

package/dist/studio-pages/client.mjs

@@ -966,11 +966,42 @@ var normalizeNumber = (value, fallback) => {
   }
   return fallback;
 };
+var getRelationID = (value) => {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!isRecord3(value)) {
+    return null;
+  }
+  const id = value.id;
+  return typeof id === "number" || typeof id === "string" ? id : null;
+};
+var toMediaLibraryItem = (value) => {
+  if (!isRecord3(value)) {
+    return null;
+  }
+  const id = getRelationID(value);
+  if (id === null) {
+    return null;
+  }
+  const filename = typeof value.filename === "string" ? value.filename : "";
+  const url = typeof value.url === "string" && value.url.length > 0 ? value.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  return {
+    alt: typeof value.alt === "string" ? value.alt : "",
+    filename,
+    id,
+    url
+  };
+};
+var mediaLabel = (item) => item.filename || item.alt || `Media #${item.id}`;
 var groupLabel = (key) => commonInspectorGroups.find((group) => group.key === key)?.label || key;
 function BlockInspectorRenderer({
   block,
   blockType,
+  mediaImageControls,
+  mediaSources,
   mode,
+  onMediaImageChange,
   onModeChange,
   onSearchQueryChange,
   onUpdateField,
@@ -995,12 +1026,24 @@ function BlockInspectorRenderer({
     });
   }, [block, fields, mode, searchQuery]);
   const groups = useMemo(() => {
-    return commonInspectorGroups.map((group) => ({
+    const baseGroups = commonInspectorGroups.map((group) => ({
       key: group.key,
       label: group.label,
       fields: resolvedFields.filter((field) => field.group === group.key)
     })).filter((group) => group.fields.length > 0);
-  }, [resolvedFields]);
+    const hasExplicitMediaControls = Boolean(mediaImageControls) || Array.isArray(mediaSources) && mediaSources.length > 0;
+    if (!hasExplicitMediaControls || baseGroups.some((group) => group.key === "media")) {
+      return baseGroups;
+    }
+    return [
+      ...baseGroups,
+      {
+        key: "media",
+        label: groupLabel("media"),
+        fields: []
+      }
+    ];
+  }, [mediaImageControls, mediaSources, resolvedFields]);
   if (!definition) {
     return /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-empty", children: "No V2 schema has been registered for this section yet." });
   }
@@ -1058,6 +1101,18 @@ function BlockInspectorRenderer({
       const mediaPositionX = normalizeNumber(getByPath(block, "settings.media.positionX"), 50);
       const mediaPositionY = normalizeNumber(getByPath(block, "settings.media.positionY"), 50);
       const mediaHeight = getByPath(block, "settings.media.height");
+      const fallbackMediaPosition = mediaPosition === "top" || mediaPosition === "bottom" || mediaPosition === "left" || mediaPosition === "right" ? mediaPosition : "center";
+      const fallbackMediaControls = {
+        cornerStyle: mediaCornerStyle === "square" ? "square" : "rounded",
+        fit: mediaFit === "contain" ? "contain" : "cover",
+        height: typeof mediaHeight === "number" ? mediaHeight : null,
+        position: fallbackMediaPosition,
+        positionX: mediaPositionX,
+        positionY: mediaPositionY
+      };
+      const effectiveMedia = mediaImageControls ?? fallbackMediaControls;
+      const effectiveMediaSources = Array.isArray(mediaSources) ? mediaSources : [];
+      const hasMediaGroupContent = group.key === "media" && (effectiveMediaSources.length > 0 || Boolean(effectiveMedia));
       return /* @__PURE__ */ jsx3(
         Accordion,
         {
@@ -1069,21 +1124,90 @@ function BlockInspectorRenderer({
           subtitle: `${group.fields.length} setting${group.fields.length === 1 ? "" : "s"}`,
           title: group.label,
           children: /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-field-list", children: [
-            group.key === "media" ? /* @__PURE__ */ jsx3(
+            group.key === "media" ? effectiveMediaSources.map((source) => {
+              const selectedSourceMedia = toMediaLibraryItem(source.value);
+              const selectedSourceMediaID = getRelationID(source.value);
+              const sourceOptions = selectedSourceMedia && !source.library.some((item) => String(item.id) === String(selectedSourceMedia.id)) ? [selectedSourceMedia, ...source.library] : source.library;
+              return /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "orion-builder-settings-item-card",
+                  style: { padding: "0.56rem" },
+                  children: [
+                    source.loading ? /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-note", children: "Loading media library..." }) : null,
+                    source.error ? /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-error", children: source.error }) : null,
+                    /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
+                      source.label,
+                      /* @__PURE__ */ jsxs3(
+                        "select",
+                        {
+                          className: "orion-builder-settings-input",
+                          onChange: (event) => source.onSelect(event.target.value),
+                          value: selectedSourceMediaID !== null ? String(selectedSourceMediaID) : "",
+                          children: [
+                            /* @__PURE__ */ jsx3("option", { value: "", children: "No image" }),
+                            sourceOptions.map((item) => /* @__PURE__ */ jsx3("option", { value: String(item.id), children: mediaLabel(item) }, String(item.id)))
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        className: "orion-builder-settings-inline-btn",
+                        disabled: selectedSourceMediaID === null,
+                        onClick: source.onRemove,
+                        type: "button",
+                        children: "Remove Image"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
+                      source.uploadLabel,
+                      /* @__PURE__ */ jsx3(
+                        "input",
+                        {
+                          accept: "image/*",
+                          className: "orion-builder-settings-input",
+                          disabled: source.uploadDisabled,
+                          onChange: (event) => {
+                            const file = event.currentTarget.files?.[0];
+                            if (file) {
+                              source.onUpload(file);
+                            }
+                            event.currentTarget.value = "";
+                          },
+                          type: "file"
+                        }
+                      )
+                    ] }),
+                    source.uploading ? /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-note", children: "Uploading image..." }) : null
+                  ]
+                },
+                `media-source-${source.label}`
+              );
+            }) : null,
+            group.key === "media" && effectiveMedia ? /* @__PURE__ */ jsx3(
               ImageControls,
               {
-                cornerStyle: mediaCornerStyle === "square" ? "square" : "rounded",
-                fit: mediaFit === "contain" ? "contain" : "cover",
-                height: typeof mediaHeight === "number" ? mediaHeight : null,
+                cornerStyle: effectiveMedia.cornerStyle,
+                fit: effectiveMedia.fit,
+                height: effectiveMedia.height,
+                heightLabel: effectiveMedia.heightLabel,
+                maxHeight: effectiveMedia.maxHeight,
+                minHeight: effectiveMedia.minHeight,
                 onChange: (field, value) => {
+                  if (onMediaImageChange) {
+                    onMediaImageChange(field, value);
+                    return;
+                  }
                   updateForKey(`settings.media.${field}`, value);
                 },
-                position: mediaPosition === "top" || mediaPosition === "bottom" || mediaPosition === "left" || mediaPosition === "right" ? mediaPosition : "center",
-                positionX: mediaPositionX,
-                positionY: mediaPositionY
+                position: effectiveMedia.position,
+                positionX: effectiveMedia.positionX,
+                positionY: effectiveMedia.positionY
               }
             ) : null,
-            group.fields.filter((field) => !(group.key === "media" && field.key.startsWith("settings.media."))).map((field) => {
+            (hasMediaGroupContent ? group.fields.filter((field) => !(group.key === "media" && field.key.startsWith("settings.media."))) : group.fields).map((field) => {
               const fieldValue = getByPath(block, field.key);
               if (field.type === "checkbox") {
                 return /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label is-checkbox", children: [
@@ -2004,6 +2128,18 @@ function BlockFrame({
 
 // src/studio-pages/builder/renderers/renderSimpleBlockPreview.tsx
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var parseOptionalPercentNumber = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Math.max(0, Math.min(100, value));
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return Math.max(0, Math.min(100, parsed));
+    }
+  }
+  return void 0;
+};
 function renderSimpleBlockPreview(args) {
   const {
     block,
@@ -2187,10 +2323,14 @@ function renderSimpleBlockPreview(args) {
   if (type === "media") {
     const image = resolveMedia2(block.image);
     const size = normalizeText3(block.size, "default");
+    const imagePositionX = parseOptionalPercentNumber(block?.imagePositionX);
+    const imagePositionY = parseOptionalPercentNumber(block?.imagePositionY);
     const imageStyle = getImagePresentationStyle2({
       cornerStyle: normalizeImageCornerStyle3(block?.imageCornerStyle),
       fit: normalizeImageFit3(block?.imageFit),
-      position: normalizeImagePosition3(block?.imagePosition)
+      position: normalizeImagePosition3(block?.imagePosition),
+      positionX: imagePositionX,
+      positionY: imagePositionY
     });
     return /* @__PURE__ */ jsx8(
       BlockFrame,
@@ -2705,7 +2845,7 @@ var lucideIconOptions = [
 ];
 var isRecord4 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
 var normalizeText = (value, fallback = "") => typeof value === "string" ? value : fallback;
-var getRelationID = (value) => {
+var getRelationID2 = (value) => {
   if (typeof value === "number" || typeof value === "string") {
     return value;
   }
@@ -2715,11 +2855,11 @@ var getRelationID = (value) => {
   const id = value.id;
   return typeof id === "number" || typeof id === "string" ? id : null;
 };
-var toMediaLibraryItem = (value) => {
+var toMediaLibraryItem2 = (value) => {
   if (!isRecord4(value)) {
     return null;
   }
-  const id = getRelationID(value);
+  const id = getRelationID2(value);
   if (id === null) {
     return null;
   }
@@ -2732,7 +2872,7 @@ var toMediaLibraryItem = (value) => {
     url
   };
 };
-var mediaLabel = (item) => item.filename || item.alt || `Media #${item.id}`;
+var mediaLabel2 = (item) => item.filename || item.alt || `Media #${item.id}`;
 var normalizeNumber2 = (value, fallback) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -2811,11 +2951,11 @@ function ArrayItemsEditor({
   const config = blockConfig[blockType];
   const normalizedQuery = searchQuery.trim().toLowerCase();
   const resolveSelectedMedia = (value) => {
-    const direct = toMediaLibraryItem(value);
+    const direct = toMediaLibraryItem2(value);
     if (direct) {
       return direct;
     }
-    const relationID = getRelationID(value);
+    const relationID = getRelationID2(value);
     if (relationID === null) {
       return null;
     }
@@ -2823,12 +2963,12 @@ function ArrayItemsEditor({
   };
   const renderMediaPicker = (item, itemIndex, field, label, uploadLabel) => {
     const selectedMedia = resolveSelectedMedia(item[field]);
-    const selectedMediaID = getRelationID(item[field]);
-    if (normalizedQuery && !hasQueryMatch(normalizedQuery, label, uploadLabel, "image", "media", selectedMedia ? mediaLabel(selectedMedia) : "")) {
+    const selectedMediaID = getRelationID2(item[field]);
+    const mediaOptions = selectedMedia && !mediaLibrary.some((libraryItem) => String(libraryItem.id) === String(selectedMedia.id)) ? [selectedMedia, ...mediaLibrary] : mediaLibrary;
+    if (normalizedQuery && !hasQueryMatch(normalizedQuery, label, uploadLabel, "image", "media", selectedMedia ? mediaLabel2(selectedMedia) : "")) {
       return null;
     }
     return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-      /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-note", children: selectedMedia ? `${label}: ${mediaLabel(selectedMedia)}` : `No ${label.toLowerCase()} selected.` }),
       /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
         label,
         /* @__PURE__ */ jsxs11(
@@ -2839,7 +2979,7 @@ function ArrayItemsEditor({
             value: selectedMediaID !== null ? String(selectedMediaID) : "",
             children: [
               /* @__PURE__ */ jsx12("option", { value: "", children: "No image" }),
-              mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx12("option", { value: String(libraryItem.id), children: mediaLabel(libraryItem) }, String(libraryItem.id)))
+              mediaOptions.map((libraryItem) => /* @__PURE__ */ jsx12("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
             ]
           }
         )
@@ -3577,7 +3717,7 @@ function parseTestimonialRating(value, fallback = 5) {
 function parsePercentNumber(value, fallback) {
   return Math.max(0, Math.min(100, parsePixelNumber(value, fallback)));
 }
-function parseOptionalPercentNumber(value) {
+function parseOptionalPercentNumber2(value) {
   if (typeof value === "number" && Number.isFinite(value)) {
     return Math.max(0, Math.min(100, value));
   }
@@ -3692,7 +3832,7 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
     sectionStyle: sectionMode === "color" ? { background: sectionColor } : sectionMode === "gradient" ? { background: sectionGradient } : block.blockType === "hero" ? { background: "transparent" } : {}
   };
 };
-function getRelationID2(value) {
+function getRelationID3(value) {
   if (typeof value === "number" || typeof value === "string") {
     return value;
   }
@@ -3725,7 +3865,7 @@ function extractUploadedMedia(value) {
   if (!candidate || typeof candidate !== "object") {
     return null;
   }
-  const id = getRelationID2(candidate);
+  const id = getRelationID3(candidate);
   if (id === null) {
     return null;
   }
@@ -3736,11 +3876,11 @@ function extractUploadedMedia(value) {
     url: typeof candidate.url === "string" ? candidate.url : ""
   };
 }
-function toMediaLibraryItem2(value) {
+function toMediaLibraryItem3(value) {
   if (!value || typeof value !== "object") {
     return null;
   }
-  const id = getRelationID2(value);
+  const id = getRelationID3(value);
   if (id === null) {
     return null;
   }
@@ -3866,6 +4006,9 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
   const selectedBlockSettings = isRecord5(selectedBlock?.settings) ? selectedBlock.settings : {};
   const selectedBlockAdvancedSettings = isRecord5(selectedBlockSettings.advanced) ? selectedBlockSettings.advanced : {};
   const isArrayItemBlockSelected = selectedType === "featureGrid" || selectedType === "logoWall" || selectedType === "beforeAfter" || selectedType === "stats" || selectedType === "faq" || selectedType === "testimonials";
+  const selectedBlockHasMediaSource = selectedType === "hero" || selectedType === "media";
+  const selectedBlockMediaValue = selectedType === "hero" ? selectedBlock?.media : selectedType === "media" ? selectedBlock?.image : null;
+  const selectedItemRecord = typeof selectedItemIndex === "number" && selectedItemIndex >= 0 && selectedItemIndex < selectedItems.length && isRecord5(selectedItems[selectedItemIndex]) ? selectedItems[selectedItemIndex] : null;
   const editCopyInPanelEnabled = Boolean(selectedBlockAdvancedSettings.editCopyInPanel);
   const isBlockUploadTarget = (blockIndex, kind) => selectedIndex === blockIndex && uploadingTarget?.kind === kind;
   const isFeatureGridItemUploading = (blockIndex, itemIndex) => selectedIndex === blockIndex && uploadingTarget?.kind === "featureGridItem" && uploadingTarget.itemIndex === itemIndex;
@@ -3886,6 +4029,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     }
     return false;
   };
+  const isSelectedBlockMediaUploading = selectedIndex !== null && (selectedType === "hero" && uploadingTarget?.kind === "hero" || selectedType === "media" && uploadingTarget?.kind === "media");
   const filteredSectionPresets = useMemo2(() => {
     const query = presetQuery.trim().toLowerCase();
     if (!query) {
@@ -3908,7 +4052,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       }
       const json = await response.json();
       const docs = Array.isArray(json.docs) ? json.docs : [];
-      const items = docs.map((doc2) => toMediaLibraryItem2(doc2)).filter((item) => item !== null);
+      const items = docs.map((doc2) => toMediaLibraryItem3(doc2)).filter((item) => item !== null);
       setMediaLibrary(items);
     } catch (error) {
       setMediaLibraryError(error instanceof Error ? error.message : "Could not load media library.");
@@ -4142,6 +4286,84 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     }
     updateArrayItemField(selectedIndex, "items", itemIndex, fieldName, mediaFromLibraryItem(selectedMedia));
   };
+  const setSelectedBlockMediaValue = (value) => {
+    if (selectedIndex === null) {
+      return;
+    }
+    setLayout((current) => {
+      const next = cloneBlockLayout(current);
+      const block = next[selectedIndex];
+      const blockType = normalizeText2(block.blockType);
+      if (blockType === "hero") {
+        next[selectedIndex] = migrateBlockToSettingsV2({
+          ...block,
+          backgroundImageURL: value ? getMediaURL(value) : "",
+          media: value
+        });
+        return next;
+      }
+      if (blockType === "media") {
+        next[selectedIndex] = migrateBlockToSettingsV2({
+          ...block,
+          image: value
+        });
+      }
+      return next;
+    });
+  };
+  const setSelectedBlockMediaFromLibrary = (mediaID) => {
+    if (selectedIndex === null || !selectedBlockHasMediaSource) {
+      return;
+    }
+    if (!mediaID) {
+      setSelectedBlockMediaValue(null);
+      return;
+    }
+    const selectedMedia = mediaLibrary.find((item) => String(item.id) === mediaID);
+    if (!selectedMedia) {
+      return;
+    }
+    setSelectedBlockMediaValue(mediaFromLibraryItem(selectedMedia));
+  };
+  const uploadSelectedBlockMediaFromV2 = (file) => {
+    if (selectedType === "hero") {
+      void uploadMediaForSelected({ kind: "hero" }, file);
+      return;
+    }
+    if (selectedType === "media") {
+      void uploadMediaForSelected({ kind: "media" }, file);
+    }
+  };
+  const updateSelectedItemMediaPresentationFromInspector = (field, value) => {
+    if (selectedIndex === null || typeof selectedItemIndex !== "number") {
+      return;
+    }
+    if (field === "height") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imageHeight", value);
+      return;
+    }
+    if (field === "fit") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imageFit", value);
+      return;
+    }
+    if (field === "cornerStyle") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imageCornerStyle", value);
+      return;
+    }
+    if (field === "position") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imagePosition", value);
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imagePositionX", null);
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imagePositionY", null);
+      return;
+    }
+    if (field === "positionX") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imagePositionX", value);
+      return;
+    }
+    if (field === "positionY") {
+      updateArrayItemField(selectedIndex, "items", selectedItemIndex, "imagePositionY", value);
+    }
+  };
   const uploadItemMediaFromV2 = (itemIndex, field, file) => {
     if (selectedType === "featureGrid" && field === "media") {
       void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
@@ -4190,7 +4412,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       const nextLayout = cloneBlockLayout(layout);
       const block = nextLayout[selectedIndex];
       if (target.kind === "hero") {
-        const uploadedItem = toMediaLibraryItem2(uploaded);
+        const uploadedItem = toMediaLibraryItem3(uploaded);
         nextLayout[selectedIndex] = {
           ...block,
           backgroundImageURL: uploadedItem?.url || normalizeText2(uploaded.url),
@@ -4254,13 +4476,13 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     const nextBlock = { ...migrateBlockToSettingsV2(block) };
     const blockType = normalizeText2(nextBlock.blockType);
     if (blockType === "hero") {
-      const mediaID = getRelationID2(nextBlock.media);
+      const mediaID = getRelationID3(nextBlock.media);
       if (mediaID !== null) {
         nextBlock.media = mediaID;
       }
     }
     if (blockType === "media") {
-      const imageID = getRelationID2(nextBlock.image);
+      const imageID = getRelationID3(nextBlock.image);
       if (imageID !== null) {
         nextBlock.image = imageID;
       }
@@ -4272,15 +4494,15 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
           return rawItem;
         }
         const nextItem = { ...rawItem };
-        const mediaID = getRelationID2(nextItem.media);
+        const mediaID = getRelationID3(nextItem.media);
         if (mediaID !== null) {
           nextItem.media = mediaID;
         }
-        const beforeMediaID = getRelationID2(nextItem.beforeMedia);
+        const beforeMediaID = getRelationID3(nextItem.beforeMedia);
         if (beforeMediaID !== null) {
           nextItem.beforeMedia = beforeMediaID;
         }
-        const afterMediaID = getRelationID2(nextItem.afterMedia);
+        const afterMediaID = getRelationID3(nextItem.afterMedia);
         if (afterMediaID !== null) {
           nextItem.afterMedia = afterMediaID;
         }
@@ -4624,6 +4846,97 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     setSidebarOpen(true);
     setActiveSidebarPanel("addSections");
   }, [layout.length]);
+  const selectedMediaSources = selectedBlockHasMediaSource ? [
+    {
+      error: mediaLibraryError,
+      label: selectedType === "hero" ? "Hero Image" : "Section Image",
+      library: mediaLibrary,
+      loading: mediaLibraryLoading,
+      onRemove: () => setSelectedBlockMediaFromLibrary(""),
+      onSelect: setSelectedBlockMediaFromLibrary,
+      onUpload: uploadSelectedBlockMediaFromV2,
+      uploadDisabled: uploadingTarget !== null,
+      uploadLabel: selectedType === "hero" ? "Upload Hero Image" : "Upload Image",
+      uploading: isSelectedBlockMediaUploading,
+      value: selectedBlockMediaValue
+    }
+  ] : selectedItemRecord && typeof selectedItemIndex === "number" && selectedType === "featureGrid" ? [
+    {
+      error: mediaLibraryError,
+      label: `Feature Image (Item ${selectedItemIndex + 1})`,
+      library: mediaLibrary,
+      loading: mediaLibraryLoading,
+      onRemove: () => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "media", ""),
+      onSelect: (mediaID) => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "media", mediaID),
+      onUpload: (file) => uploadItemMediaFromV2(selectedItemIndex, "media", file),
+      uploadDisabled: uploadingTarget !== null,
+      uploadLabel: "Upload Feature Image",
+      uploading: isSelectedItemMediaUploading(selectedItemIndex, "media"),
+      value: selectedItemRecord.media
+    }
+  ] : selectedItemRecord && typeof selectedItemIndex === "number" && selectedType === "logoWall" ? [
+    {
+      error: mediaLibraryError,
+      label: `Logo Image (Item ${selectedItemIndex + 1})`,
+      library: mediaLibrary,
+      loading: mediaLibraryLoading,
+      onRemove: () => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "media", ""),
+      onSelect: (mediaID) => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "media", mediaID),
+      onUpload: (file) => uploadItemMediaFromV2(selectedItemIndex, "media", file),
+      uploadDisabled: uploadingTarget !== null,
+      uploadLabel: "Upload Logo Image",
+      uploading: isSelectedItemMediaUploading(selectedItemIndex, "media"),
+      value: selectedItemRecord.media
+    }
+  ] : selectedItemRecord && typeof selectedItemIndex === "number" && selectedType === "beforeAfter" ? [
+    {
+      error: mediaLibraryError,
+      label: `Before Image (Item ${selectedItemIndex + 1})`,
+      library: mediaLibrary,
+      loading: mediaLibraryLoading,
+      onRemove: () => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "beforeMedia", ""),
+      onSelect: (mediaID) => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "beforeMedia", mediaID),
+      onUpload: (file) => uploadItemMediaFromV2(selectedItemIndex, "beforeMedia", file),
+      uploadDisabled: uploadingTarget !== null,
+      uploadLabel: "Upload Before Image",
+      uploading: isSelectedItemMediaUploading(selectedItemIndex, "beforeMedia"),
+      value: selectedItemRecord.beforeMedia
+    },
+    {
+      error: mediaLibraryError,
+      label: `After Image (Item ${selectedItemIndex + 1})`,
+      library: mediaLibrary,
+      loading: mediaLibraryLoading,
+      onRemove: () => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "afterMedia", ""),
+      onSelect: (mediaID) => setSelectedItemMediaFieldFromLibrary(selectedItemIndex, "afterMedia", mediaID),
+      onUpload: (file) => uploadItemMediaFromV2(selectedItemIndex, "afterMedia", file),
+      uploadDisabled: uploadingTarget !== null,
+      uploadLabel: "Upload After Image",
+      uploading: isSelectedItemMediaUploading(selectedItemIndex, "afterMedia"),
+      value: selectedItemRecord.afterMedia
+    }
+  ] : [];
+  const selectedMediaImageControls = selectedItemRecord && typeof selectedItemIndex === "number" && (selectedType === "featureGrid" || selectedType === "logoWall" || selectedType === "beforeAfter") ? {
+    cornerStyle: normalizeImageCornerStyle2(selectedItemRecord.imageCornerStyle),
+    fit: normalizeImageFit2(selectedItemRecord.imageFit),
+    height: (() => {
+      if (typeof selectedItemRecord.imageHeight === "number" && Number.isFinite(selectedItemRecord.imageHeight)) {
+        return selectedItemRecord.imageHeight;
+      }
+      if (typeof selectedItemRecord.imageHeight === "string" && selectedItemRecord.imageHeight.trim().length > 0) {
+        const parsed = Number(selectedItemRecord.imageHeight);
+        if (Number.isFinite(parsed)) {
+          return parsed;
+        }
+      }
+      return null;
+    })(),
+    maxHeight: selectedType === "logoWall" ? 200 : 600,
+    minHeight: selectedType === "logoWall" ? 24 : selectedType === "beforeAfter" ? 60 : 40,
+    position: normalizeImagePosition2(selectedItemRecord.imagePosition),
+    positionX: parsePercentNumber(selectedItemRecord.imagePositionX, 50),
+    positionY: parsePercentNumber(selectedItemRecord.imagePositionY, 50)
+  } : void 0;
   useEffect4(() => {
     return;
   }, [layout]);
@@ -4856,6 +5169,8 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                 block.backgroundImageFit
               );
               const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
+              const backgroundImagePositionX = parseOptionalPercentNumber2(block.backgroundImagePositionX);
+              const backgroundImagePositionY = parseOptionalPercentNumber2(block.backgroundImagePositionY);
               const heroHeight = normalizeHeroHeight(block.heroHeight);
               const heroMinHeight = heroHeight === "full" ? "100svh" : heroHeight === "md" ? resolveBuilderMediumHeroHeight(topViewportHeight) : "360px";
               const heroCornerRadius = getHeroImageCornerRadius(backgroundImageCornerStyle);
@@ -4865,6 +5180,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
               );
               const backgroundImageURL = normalizeText2(block.backgroundImageURL);
               const backgroundImage = media?.url || backgroundImageURL;
+              const backgroundPositionBase = positionPercent(backgroundImagePosition, backgroundImageFit);
+              const resolvedBackgroundPositionX = typeof backgroundImagePositionX === "number" ? backgroundImagePositionX : backgroundPositionBase.x;
+              const resolvedBackgroundPositionY = typeof backgroundImagePositionY === "number" ? backgroundImagePositionY : backgroundPositionBase.y;
+              const backgroundImageObjectPosition = `${resolvedBackgroundPositionX}% ${resolvedBackgroundPositionY}%`;
               const hasCustomHeroColor = backgroundColor.length > 0 && backgroundColor.toLowerCase() !== "#124a37";
               const overlayModeRaw = normalizeText2(block?.backgroundOverlayMode, "none");
               const overlayMode = overlayModeRaw === "solid" || overlayModeRaw === "gradient" ? overlayModeRaw : "none";
@@ -4898,7 +5217,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
               const mediaStyle = backgroundImage && variant === "default" ? {
                 ...hasCustomHeroColor ? { backgroundColor } : {},
                 backgroundImage: overlayLayer ? `${overlayLayer}, url('${backgroundImage}')` : `url('${backgroundImage}')`,
-                backgroundPosition: overlayLayer ? `center center, ${backgroundImagePosition}` : backgroundImagePosition,
+                backgroundPosition: overlayLayer ? `center center, ${backgroundImageObjectPosition}` : backgroundImageObjectPosition,
                 backgroundRepeat: overlayLayer ? "no-repeat, no-repeat" : "no-repeat",
                 backgroundSize: overlayLayer ? `cover, ${backgroundImageFit}` : backgroundImageFit,
                 minHeight: heroMinHeight
@@ -5031,8 +5350,8 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               const iconType = normalizeText2(itemRecord?.iconType, "badge");
                               const iconBadge = normalizeText2(itemRecord?.icon);
                               const iconLucide = normalizeText2(itemRecord?.iconLucide);
-                              const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
-                              const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
+                              const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
+                              const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                               const itemImageStyle = getImagePresentationStyle({
                                 cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
                                 fit: normalizeImageFit2(itemRecord?.imageFit),
@@ -5146,8 +5465,8 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                             const iconType = normalizeText2(itemRecord?.iconType, "badge");
                             const iconBadge = normalizeText2(itemRecord?.icon);
                             const iconLucide = normalizeText2(itemRecord?.iconLucide);
-                            const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
-                            const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
+                            const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
+                            const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                             const itemImageStyle = getImagePresentationStyle({
                               cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
                               fit: normalizeImageFit2(itemRecord?.imageFit),
@@ -5350,8 +5669,8 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                         const itemRecord = item;
                         const media = resolveMedia(itemRecord?.media);
                         const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 54);
-                        const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
-                        const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
+                        const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
+                        const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                         const imageStyle = getImagePresentationStyle({
                           cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
                           fit: normalizeImageFit2(itemRecord?.imageFit),
@@ -5457,8 +5776,8 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                             const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
                             const afterMedia = resolveMedia(itemRecord?.afterMedia);
                             const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
-                            const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
-                            const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
+                            const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
+                            const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                             const imageStyle = getImagePresentationStyle({
                               cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
                               fit: normalizeImageFit2(itemRecord?.imageFit),
@@ -5982,7 +6301,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               {
                                 block: selectedBlock,
                                 blockType: selectedType,
+                                mediaImageControls: selectedMediaImageControls,
+                                mediaSources: selectedMediaSources,
                                 mode: settingsPanelMode,
+                                onMediaImageChange: selectedMediaImageControls ? updateSelectedItemMediaPresentationFromInspector : void 0,
                                 onModeChange: setSettingsPanelMode,
                                 onSearchQueryChange: setSettingsSearchQuery,
                                 onUpdateField: updateSelectedField,