@orion-studios/payload-studio 0.5.0-beta.84 → 0.5.0-beta.86

package/dist/{chunk-PGOTV7IF.mjs → chunk-AFLEATYB.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ADIIWIYL.mjs";
 import {
   studioDocumentToLayout
-} from "./chunk-ZMADCW3Y.mjs";
+} from "./chunk-FWVVRZ32.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";

package/dist/{chunk-ZMADCW3Y.mjs → chunk-FWVVRZ32.mjs}

@@ -743,7 +743,7 @@ var inspectorDefinitionByBlockType = {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/studio-pages/migrations.ts
 var isRecord3 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);

package/dist/index.mjs

@@ -9,13 +9,13 @@ import {
 } from "./chunk-XK3K5GRP.mjs";
 import {
   nextjs_exports
-} from "./chunk-PGOTV7IF.mjs";
+} from "./chunk-AFLEATYB.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
 import {
   studio_pages_exports
-} from "./chunk-ZMADCW3Y.mjs";
+} from "./chunk-FWVVRZ32.mjs";
 import "./chunk-SIL2J5MF.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/nextjs/index.mjs

@@ -4,9 +4,9 @@ import {
   createPayloadClient,
   createSiteQueries,
   resolveMedia
-} from "../chunk-PGOTV7IF.mjs";
+} from "../chunk-AFLEATYB.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-ZMADCW3Y.mjs";
+import "../chunk-FWVVRZ32.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/client.js

@@ -447,7 +447,7 @@ function ImageControls({
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "orion-builder-settings-label", children: [
-      "Focus X (%)",
+      "Horizontal Image Focus (%)",
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-builder-settings-input-split", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "input",
@@ -473,7 +473,7 @@ function ImageControls({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "orion-builder-settings-label", children: [
-      "Focus Y (%)",
+      "Vertical Image Focus (%)",
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-builder-settings-input-split", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "input",
@@ -1023,9 +1023,11 @@ var mediaLabel = (item) => item.filename || item.alt || `Media #${item.id}`;
 var groupLabel = (key) => commonInspectorGroups.find((group) => group.key === key)?.label || key;
 function BlockInspectorRenderer({
   block,
-  blockMedia,
   blockType,
+  mediaImageControls,
+  mediaSources,
   mode,
+  onMediaImageChange,
   onModeChange,
   onSearchQueryChange,
   onUpdateField,
@@ -1050,12 +1052,24 @@ function BlockInspectorRenderer({
     });
   }, [block, fields, mode, searchQuery]);
   const groups = (0, import_react.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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-empty", children: "No V2 schema has been registered for this section yet." });
   }
@@ -1113,9 +1127,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 selectedBlockMedia = blockMedia ? toMediaLibraryItem(blockMedia.value) : null;
-      const selectedBlockMediaID = blockMedia ? getRelationID(blockMedia.value) : null;
-      const blockMediaOptions = blockMedia && selectedBlockMedia && !blockMedia.library.some((item) => String(item.id) === String(selectedBlockMedia.id)) ? [selectedBlockMedia, ...blockMedia.library] : blockMedia?.library || [];
+      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__ */ (0, import_jsx_runtime3.jsx)(
         Accordion,
         {
@@ -1127,70 +1150,90 @@ function BlockInspectorRenderer({
           subtitle: `${group.fields.length} setting${group.fields.length === 1 ? "" : "s"}`,
           title: group.label,
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-builder-settings-field-list", children: [
-            group.key === "media" && blockMedia ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              blockMedia.loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-note", children: "Loading media library..." }) : null,
-              blockMedia.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-error", children: blockMedia.error }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "orion-builder-settings-label", children: [
-                blockMedia.label,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "select",
-                  {
-                    className: "orion-builder-settings-input",
-                    onChange: (event) => blockMedia.onSelect(event.target.value),
-                    value: selectedBlockMediaID !== null ? String(selectedBlockMediaID) : "",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "No image" }),
-                      blockMediaOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: String(item.id), children: mediaLabel(item) }, String(item.id)))
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "button",
+            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__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
                 {
-                  className: "orion-builder-settings-inline-btn",
-                  disabled: selectedBlockMediaID === null,
-                  onClick: blockMedia.onRemove,
-                  type: "button",
-                  children: "Remove Image"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "orion-builder-settings-label", children: [
-                blockMedia.uploadLabel,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "input",
-                  {
-                    accept: "image/*",
-                    className: "orion-builder-settings-input",
-                    disabled: blockMedia.uploadDisabled,
-                    onChange: (event) => {
-                      const file = event.currentTarget.files?.[0];
-                      if (file) {
-                        blockMedia.onUpload(file);
+                  className: "orion-builder-settings-item-card",
+                  style: { padding: "0.56rem" },
+                  children: [
+                    source.loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-note", children: "Loading media library..." }) : null,
+                    source.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-error", children: source.error }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "orion-builder-settings-label", children: [
+                      source.label,
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "select",
+                        {
+                          className: "orion-builder-settings-input",
+                          onChange: (event) => source.onSelect(event.target.value),
+                          value: selectedSourceMediaID !== null ? String(selectedSourceMediaID) : "",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "No image" }),
+                            sourceOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: String(item.id), children: mediaLabel(item) }, String(item.id)))
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        className: "orion-builder-settings-inline-btn",
+                        disabled: selectedSourceMediaID === null,
+                        onClick: source.onRemove,
+                        type: "button",
+                        children: "Remove Image"
                       }
-                      event.currentTarget.value = "";
-                    },
-                    type: "file"
-                  }
-                )
-              ] }),
-              blockMedia.uploading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-note", children: "Uploading image..." }) : null
-            ] }) : null,
-            group.key === "media" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "orion-builder-settings-label", children: [
+                      source.uploadLabel,
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-builder-settings-note", children: "Uploading image..." }) : null
+                  ]
+                },
+                `media-source-${source.label}`
+              );
+            }) : null,
+            group.key === "media" && effectiveMedia ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               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__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "orion-builder-settings-label is-checkbox", children: [
@@ -2204,6 +2247,18 @@ function BlockFrame({
 
 // src/studio-pages/builder/renderers/renderSimpleBlockPreview.tsx
 var import_jsx_runtime8 = require("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,
@@ -2387,10 +2442,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__ */ (0, import_jsx_runtime8.jsx)(
       BlockFrame,
@@ -3345,25 +3404,25 @@ function ArrayItemsEditor({
                   minHeight: blockType === "logoWall" ? 24 : blockType === "beforeAfter" ? 60 : 40,
                   onChange: (field, value) => {
                     if (field === "height") {
-                      onUpdateItemField(itemIndex, "imageHeight", value);
+                      onUpdateItemSetting(itemIndex, "media.height", value);
                       return;
                     }
                     if (field === "fit") {
-                      onUpdateItemField(itemIndex, "imageFit", value);
+                      onUpdateItemSetting(itemIndex, "media.fit", value);
                       return;
                     }
                     if (field === "cornerStyle") {
-                      onUpdateItemField(itemIndex, "imageCornerStyle", value);
+                      onUpdateItemSetting(itemIndex, "media.cornerStyle", value);
                       return;
                     }
                     if (field === "position") {
-                      onUpdateItemField(itemIndex, "imagePosition", value);
-                      onUpdateItemField(itemIndex, "imagePositionX", null);
-                      onUpdateItemField(itemIndex, "imagePositionY", null);
+                      onUpdateItemSetting(itemIndex, "media.position", value);
+                      onUpdateItemSetting(itemIndex, "media.positionX", null);
+                      onUpdateItemSetting(itemIndex, "media.positionY", null);
                       return;
                     }
                     if (field === "positionX" || field === "positionY") {
-                      onUpdateItemField(itemIndex, field === "positionX" ? "imagePositionX" : "imagePositionY", value);
+                      onUpdateItemSetting(itemIndex, `media.${field}`, value);
                     }
                   },
                   position: normalizeImagePosition(item.imagePosition),
@@ -3777,7 +3836,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));
   }
@@ -4068,6 +4127,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
   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;
@@ -4393,6 +4453,36 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       void uploadMediaForSelected({ kind: "media" }, file);
     }
   };
+  const updateSelectedItemMediaPresentationFromInspector = (field, value) => {
+    if (selectedIndex === null || typeof selectedItemIndex !== "number") {
+      return;
+    }
+    if (field === "height") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.height", value);
+      return;
+    }
+    if (field === "fit") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.fit", value);
+      return;
+    }
+    if (field === "cornerStyle") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.cornerStyle", value);
+      return;
+    }
+    if (field === "position") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.position", value);
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.positionX", null);
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.positionY", null);
+      return;
+    }
+    if (field === "positionX") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.positionX", value);
+      return;
+    }
+    if (field === "positionY") {
+      updateArrayItemSettingField(selectedIndex, "items", selectedItemIndex, "media.positionY", value);
+    }
+  };
   const uploadItemMediaFromV2 = (itemIndex, field, file) => {
     if (selectedType === "featureGrid" && field === "media") {
       void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
@@ -4875,6 +4965,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;
   (0, import_react5.useEffect)(() => {
     return;
   }, [layout]);
@@ -5107,6 +5288,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);
@@ -5116,6 +5299,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";
@@ -5149,7 +5336,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
@@ -5282,8 +5469,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),
@@ -5397,8 +5584,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),
@@ -5601,8 +5788,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),
@@ -5708,8 +5895,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),
@@ -6232,21 +6419,11 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               BlockInspectorRenderer,
                               {
                                 block: selectedBlock,
-                                blockMedia: 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
-                                } : void 0,
                                 blockType: selectedType,
+                                mediaImageControls: selectedMediaImageControls,
+                                mediaSources: selectedMediaSources,
                                 mode: settingsPanelMode,
+                                onMediaImageChange: selectedMediaImageControls ? updateSelectedItemMediaPresentationFromInspector : void 0,
                                 onModeChange: setSettingsPanelMode,
                                 onSearchQueryChange: setSettingsSearchQuery,
                                 onUpdateField: updateSelectedField,