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

package/dist/studio-pages/client.mjs

@@ -129,6 +129,7 @@ var defaultBuilderThemeTokens = {
 
 // src/studio-pages/builder/adapters/settingsV2.ts
 var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var isTextAlign = (value) => value === "left" || value === "center" || value === "right" || value === "justify";
 var parsePercent = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return Math.max(0, Math.min(100, value));
@@ -171,6 +172,10 @@ var mergeSettings = (defaults, input) => {
 };
 var legacyBlockToV2Settings = (block) => {
   const current = structuredClone(defaultBuilderBlockSettingsV2);
+  if (block.blockType === "hero" && block.variant === "centered") {
+    current.typography.headingAlign = "center";
+    current.typography.bodyAlign = "center";
+  }
   current.layout.contentWidth = block.contentWidth === "narrow" || block.contentWidth === "content" || block.contentWidth === "wide" || block.contentWidth === "full" || block.contentWidth === "inherit" ? block.contentWidth : current.layout.contentWidth;
   current.layout.sectionPaddingX = block.sectionPaddingX === "none" || block.sectionPaddingX === "sm" || block.sectionPaddingX === "md" || block.sectionPaddingX === "lg" || block.sectionPaddingX === "inherit" ? block.sectionPaddingX : current.layout.sectionPaddingX;
   current.layout.sectionPaddingY = block.sectionPaddingY === "none" || block.sectionPaddingY === "sm" || block.sectionPaddingY === "lg" ? block.sectionPaddingY : current.layout.sectionPaddingY;
@@ -207,8 +212,8 @@ var legacyBlockToV2Settings = (block) => {
   current.media.positionX = parsePercent(block.imagePositionX ?? block.backgroundImagePositionX);
   current.media.positionY = parsePercent(block.imagePositionY ?? block.backgroundImagePositionY);
   current.media.height = parsePixel(block.imageHeight);
-  current.typography.headingAlign = block.textHeadingAlign === "left" || block.textHeadingAlign === "center" || block.textHeadingAlign === "right" || block.textHeadingAlign === "justify" ? block.textHeadingAlign : current.typography.headingAlign;
-  current.typography.bodyAlign = block.textBodyAlign === "left" || block.textBodyAlign === "center" || block.textBodyAlign === "right" || block.textBodyAlign === "justify" ? block.textBodyAlign : current.typography.bodyAlign;
+  current.typography.headingAlign = isTextAlign(block.textHeadingAlign) ? block.textHeadingAlign : current.typography.headingAlign;
+  current.typography.bodyAlign = isTextAlign(block.textBodyAlign) ? block.textBodyAlign : current.typography.bodyAlign;
   current.typography.maxTextWidth = block.textMaxWidth === "auto" || block.textMaxWidth === "sm" || block.textMaxWidth === "md" || block.textMaxWidth === "lg" || block.textMaxWidth === "full" ? block.textMaxWidth : current.typography.maxTextWidth;
   current.typography.lineHeightPreset = block.textLineHeightPreset === "tight" || block.textLineHeightPreset === "normal" || block.textLineHeightPreset === "relaxed" ? block.textLineHeightPreset : current.typography.lineHeightPreset;
   current.typography.letterSpacingPreset = block.textLetterSpacingPreset === "tight" || block.textLetterSpacingPreset === "normal" || block.textLetterSpacingPreset === "relaxed" ? block.textLetterSpacingPreset : current.typography.letterSpacingPreset;
@@ -925,6 +930,12 @@ var toMediaLibraryItem = (value) => {
   };
 };
 var mediaLabel = (item) => item.filename || item.alt || `Media #${item.id}`;
+var findMediaLibraryItem = (library, id) => {
+  if (id === null) {
+    return null;
+  }
+  return library.find((item) => String(item.id) === String(id)) || null;
+};
 var groupLabel = (key) => commonInspectorGroups.find((group) => group.key === key)?.label || key;
 function BlockInspectorRenderer({
   block,
@@ -1048,8 +1059,9 @@ function BlockInspectorRenderer({
           title: group.label,
           children: /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-field-list", children: [
             group.key === "media" ? effectiveMediaSources.map((source) => {
-              const selectedSourceMedia = toMediaLibraryItem(source.value);
               const selectedSourceMediaID = getRelationID(source.value);
+              const selectedRelationMedia = toMediaLibraryItem(source.value);
+              const selectedSourceMedia = selectedRelationMedia ?? findMediaLibraryItem(source.library, selectedSourceMediaID);
               const sourceOptions = selectedSourceMedia && !source.library.some((item) => String(item.id) === String(selectedSourceMedia.id)) ? [selectedSourceMedia, ...source.library] : source.library;
               return /* @__PURE__ */ jsxs3(
                 "div",
@@ -1074,6 +1086,10 @@ function BlockInspectorRenderer({
                         }
                       )
                     ] }),
+                    selectedSourceMedia?.alt ? /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
+                      "Media Description",
+                      /* @__PURE__ */ jsx3("input", { className: "orion-builder-settings-input", readOnly: true, type: "text", value: selectedSourceMedia.alt })
+                    ] }) : selectedSourceMediaID !== null ? /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-note", children: "This media item does not have a description yet." }) : null,
                     /* @__PURE__ */ jsx3(
                       "button",
                       {
@@ -2129,8 +2145,8 @@ function renderSimpleBlockPreview(args) {
     getImagePresentationStyle: getImagePresentationStyle2,
     index,
     isBlockUploadTarget,
-    normalizeImageCornerStyle: normalizeImageCornerStyle2,
-    normalizeImageFit: normalizeImageFit2,
+    normalizeImageCornerStyle: normalizeImageCornerStyle3,
+    normalizeImageFit: normalizeImageFit3,
     normalizeText: normalizeText3,
     onDropAt,
     renderWithSectionShell,
@@ -2314,8 +2330,8 @@ function renderSimpleBlockPreview(args) {
     const imagePositionX = parseOptionalPercentNumber(mediaSettings.positionX ?? block?.imagePositionX);
     const imagePositionY = parseOptionalPercentNumber(mediaSettings.positionY ?? block?.imagePositionY);
     const imageStyle = getImagePresentationStyle2({
-      cornerStyle: normalizeImageCornerStyle2(mediaSettings.cornerStyle ?? block?.imageCornerStyle),
-      fit: normalizeImageFit2(mediaSettings.fit ?? block?.imageFit),
+      cornerStyle: normalizeImageCornerStyle3(mediaSettings.cornerStyle ?? block?.imageCornerStyle),
+      fit: normalizeImageFit3(mediaSettings.fit ?? block?.imageFit),
       positionX: imagePositionX,
       positionY: imagePositionY
     });
@@ -2845,6 +2861,63 @@ var normalizeNumber2 = (value, fallback) => {
   return fallback;
 };
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var getRelationID2 = (value) => {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!isRecord5(value)) {
+    return null;
+  }
+  const id = value.id;
+  return typeof id === "number" || typeof id === "string" ? id : null;
+};
+var toMediaLibraryItem2 = (value) => {
+  if (!isRecord5(value)) {
+    return null;
+  }
+  const id = getRelationID2(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 mediaLabel2 = (item) => item.filename || item.alt || `Media #${item.id}`;
+var findMediaLibraryItem2 = (library, id) => {
+  if (id === null) {
+    return null;
+  }
+  return library.find((item) => String(item.id) === String(id)) || null;
+};
+var normalizeImageFit = (value) => value === "contain" ? "contain" : "cover";
+var normalizeImageCornerStyle = (value) => value === "square" ? "square" : "rounded";
+var getItemMediaSettings = (item) => {
+  const settings = isRecord5(item.settings) ? item.settings : {};
+  const media = isRecord5(settings.media) ? settings.media : {};
+  return {
+    cornerStyle: normalizeImageCornerStyle(media.cornerStyle ?? item.imageCornerStyle),
+    fit: normalizeImageFit(media.fit ?? item.imageFit),
+    height: (() => {
+      const value = media.height ?? item.imageHeight;
+      if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+      }
+      if (typeof value === "string" && value.trim().length > 0) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : null;
+      }
+      return null;
+    })(),
+    positionX: clamp(normalizeNumber2(media.positionX ?? item.imagePositionX, 50), 0, 100),
+    positionY: clamp(normalizeNumber2(media.positionY ?? item.imagePositionY, 50), 0, 100)
+  };
+};
 var hasQueryMatch = (query, ...values) => {
   const normalized = query.trim().toLowerCase();
   if (!normalized) {
@@ -2891,18 +2964,157 @@ var bulletsToTextareaValue = (value) => {
   return value.map((item) => isRecord5(item) && typeof item.label === "string" ? item.label.trim() : "").filter(Boolean).join("\n");
 };
 var textareaValueToBullets = (value) => value.split("\n").map((line) => line.trim()).filter(Boolean).map((label) => ({ label }));
+function ItemMediaControl({
+  fieldName,
+  imageURLFieldName,
+  item,
+  itemIndex,
+  label,
+  mediaLibrary,
+  mediaLibraryError,
+  mediaLibraryLoading,
+  maxHeight,
+  minHeight,
+  onRemoveItemMedia,
+  onSelectItemMedia,
+  onUpdateItemField,
+  onUpdateItemMediaPresentation,
+  onUploadItemMedia,
+  searchQuery,
+  uploadDisabled,
+  uploadLabel,
+  uploading
+}) {
+  const selectedMediaID = getRelationID2(item[fieldName]);
+  const selectedRelationMedia = toMediaLibraryItem2(item[fieldName]);
+  const selectedMedia = selectedRelationMedia ?? findMediaLibraryItem2(mediaLibrary, selectedMediaID);
+  const directImageURL = normalizeText(item[imageURLFieldName]);
+  const previewURL = selectedMedia?.url || directImageURL;
+  const mediaSettings = getItemMediaSettings(item);
+  const sourceOptions = selectedMedia && !mediaLibrary.some((libraryItem) => String(libraryItem.id) === String(selectedMedia.id)) ? [selectedMedia, ...mediaLibrary] : mediaLibrary;
+  if (!hasQueryMatch(searchQuery, label, "image", "media", "photo", "picture", "url", "fit", "crop", "height")) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "orion-builder-settings-item-card", style: { padding: "0.56rem" }, children: [
+    /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-label", children: label }),
+    previewURL ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx12(
+        "img",
+        {
+          alt: selectedMedia?.alt || label,
+          src: previewURL,
+          style: {
+            aspectRatio: "16 / 9",
+            border: "1px solid rgba(35, 51, 82, 0.14)",
+            borderRadius: mediaSettings.cornerStyle === "square" ? 4 : 10,
+            display: "block",
+            objectFit: mediaSettings.fit,
+            objectPosition: `${mediaSettings.positionX}% ${mediaSettings.positionY}%`,
+            width: "100%"
+          }
+        }
+      )
+    ) : /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-empty", children: "No image selected." }),
+    mediaLibraryLoading ? /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-note", children: "Loading media library..." }) : null,
+    mediaLibraryError ? /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-error", children: mediaLibraryError }) : null,
+    /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+      "Media Library Image",
+      /* @__PURE__ */ jsxs11(
+        "select",
+        {
+          className: "orion-builder-settings-input",
+          onChange: (event) => onSelectItemMedia?.(itemIndex, fieldName, event.target.value),
+          value: selectedMediaID !== null ? String(selectedMediaID) : "",
+          children: [
+            /* @__PURE__ */ jsx12("option", { value: "", children: "No library image" }),
+            sourceOptions.map((libraryItem) => /* @__PURE__ */ jsx12("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
+          ]
+        }
+      )
+    ] }),
+    selectedMedia?.alt ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+      "Media Description",
+      /* @__PURE__ */ jsx12("input", { className: "orion-builder-settings-input", readOnly: true, type: "text", value: selectedMedia.alt })
+    ] }) : selectedMediaID !== null ? /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-note", children: "This media item does not have a description yet." }) : null,
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        className: "orion-builder-settings-inline-btn",
+        disabled: selectedMediaID === null,
+        onClick: () => onRemoveItemMedia?.(itemIndex, fieldName),
+        type: "button",
+        children: "Remove Library Image"
+      }
+    ),
+    /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+      "Direct Image URL",
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          className: "orion-builder-settings-input",
+          onChange: (event) => onUpdateItemField(itemIndex, imageURLFieldName, event.target.value),
+          type: "text",
+          value: directImageURL
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+      uploadLabel,
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          accept: "image/*",
+          className: "orion-builder-settings-input",
+          disabled: uploadDisabled,
+          onChange: (event) => {
+            const file = event.currentTarget.files?.[0];
+            if (file) {
+              onUploadItemMedia?.(itemIndex, fieldName, file);
+            }
+            event.currentTarget.value = "";
+          },
+          type: "file"
+        }
+      )
+    ] }),
+    uploading ? /* @__PURE__ */ jsx12("div", { className: "orion-builder-settings-note", children: "Uploading image..." }) : null,
+    /* @__PURE__ */ jsx12(
+      ImageControls,
+      {
+        cornerStyle: mediaSettings.cornerStyle,
+        fit: mediaSettings.fit,
+        height: mediaSettings.height,
+        maxHeight,
+        minHeight,
+        onChange: (field, value) => onUpdateItemMediaPresentation?.(itemIndex, field, value),
+        positionX: mediaSettings.positionX,
+        positionY: mediaSettings.positionY
+      }
+    )
+  ] });
+}
 function ArrayItemsEditor({
   blockType,
   expandedItemIndex,
   items,
+  mediaLibrary = [],
+  mediaLibraryError = "",
+  mediaLibraryLoading = false,
   mode,
   onAddItem,
+  onRemoveItemMedia,
   onRemoveItem,
+  onSelectItemMedia,
   onToggleItem,
   onUpdateItemField,
+  onUpdateItemMediaPresentation,
   onUpdateItemSetting,
+  onUploadItemMedia,
   searchQuery,
-  showInlineCopyFields
+  showInlineCopyFields,
+  uploadDisabled = false,
+  isItemMediaUploading
 }) {
   const config = blockConfig[blockType];
   const normalizedQuery = searchQuery.trim().toLowerCase();
@@ -3052,11 +3264,30 @@ function ArrayItemsEditor({
                     }
                   )
                 ] }) : null,
-                /* @__PURE__ */ jsxs11("div", { className: "orion-builder-settings-note", children: [
-                  "Select this item and use the ",
-                  /* @__PURE__ */ jsx12("strong", { children: "Media" }),
-                  " group above for image source and presentation."
-                ] })
+                /* @__PURE__ */ jsx12(
+                  ItemMediaControl,
+                  {
+                    fieldName: "media",
+                    imageURLFieldName: "imageURL",
+                    item,
+                    itemIndex,
+                    label: "Feature Image",
+                    maxHeight: 600,
+                    mediaLibrary,
+                    mediaLibraryError,
+                    mediaLibraryLoading,
+                    minHeight: 40,
+                    onRemoveItemMedia,
+                    onSelectItemMedia,
+                    onUpdateItemField,
+                    onUpdateItemMediaPresentation,
+                    onUploadItemMedia,
+                    searchQuery: normalizedQuery,
+                    uploadDisabled,
+                    uploadLabel: "Upload Feature Image",
+                    uploading: Boolean(isItemMediaUploading?.(itemIndex, "media"))
+                  }
+                )
               ] }) : null,
               blockType === "logoWall" ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
                 showInlineCopyFields ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
@@ -3083,11 +3314,30 @@ function ArrayItemsEditor({
                     }
                   )
                 ] }) : null,
-                /* @__PURE__ */ jsxs11("div", { className: "orion-builder-settings-note", children: [
-                  "Select this item and use the ",
-                  /* @__PURE__ */ jsx12("strong", { children: "Media" }),
-                  " group above for image source and presentation."
-                ] })
+                /* @__PURE__ */ jsx12(
+                  ItemMediaControl,
+                  {
+                    fieldName: "media",
+                    imageURLFieldName: "imageURL",
+                    item,
+                    itemIndex,
+                    label: "Logo Image",
+                    maxHeight: 200,
+                    mediaLibrary,
+                    mediaLibraryError,
+                    mediaLibraryLoading,
+                    minHeight: 24,
+                    onRemoveItemMedia,
+                    onSelectItemMedia,
+                    onUpdateItemField,
+                    onUpdateItemMediaPresentation,
+                    onUploadItemMedia,
+                    searchQuery: normalizedQuery,
+                    uploadDisabled,
+                    uploadLabel: "Upload Logo Image",
+                    uploading: Boolean(isItemMediaUploading?.(itemIndex, "media"))
+                  }
+                )
               ] }) : null,
               blockType === "beforeAfter" ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
                 showInlineCopyFields ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
@@ -3115,11 +3365,54 @@ function ArrayItemsEditor({
                     )
                   ] })
                 ] }) : null,
-                /* @__PURE__ */ jsxs11("div", { className: "orion-builder-settings-note", children: [
-                  "Select this item and use the ",
-                  /* @__PURE__ */ jsx12("strong", { children: "Media" }),
-                  " group above for before/after image source and presentation."
-                ] })
+                /* @__PURE__ */ jsx12(
+                  ItemMediaControl,
+                  {
+                    fieldName: "beforeMedia",
+                    imageURLFieldName: "beforeImageURL",
+                    item,
+                    itemIndex,
+                    label: "Before Image",
+                    maxHeight: 600,
+                    mediaLibrary,
+                    mediaLibraryError,
+                    mediaLibraryLoading,
+                    minHeight: 60,
+                    onRemoveItemMedia,
+                    onSelectItemMedia,
+                    onUpdateItemField,
+                    onUpdateItemMediaPresentation,
+                    onUploadItemMedia,
+                    searchQuery: normalizedQuery,
+                    uploadDisabled,
+                    uploadLabel: "Upload Before Image",
+                    uploading: Boolean(isItemMediaUploading?.(itemIndex, "beforeMedia"))
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  ItemMediaControl,
+                  {
+                    fieldName: "afterMedia",
+                    imageURLFieldName: "afterImageURL",
+                    item,
+                    itemIndex,
+                    label: "After Image",
+                    maxHeight: 600,
+                    mediaLibrary,
+                    mediaLibraryError,
+                    mediaLibraryLoading,
+                    minHeight: 60,
+                    onRemoveItemMedia,
+                    onSelectItemMedia,
+                    onUpdateItemField,
+                    onUpdateItemMediaPresentation,
+                    onUploadItemMedia,
+                    searchQuery: normalizedQuery,
+                    uploadDisabled,
+                    uploadLabel: "Upload After Image",
+                    uploading: Boolean(isItemMediaUploading?.(itemIndex, "afterMedia"))
+                  }
+                )
               ] }) : null,
               blockType === "stats" ? /* @__PURE__ */ jsx12(Fragment4, { children: showInlineCopyFields ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
                 /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
@@ -3325,8 +3618,8 @@ var resolveBuilderMediumHeroHeight = (topViewportHeight) => {
   }
   return "50svh";
 };
-var normalizeImageFit = (value) => normalizeHeroImageFit(value);
-var normalizeImageCornerStyle = (value, legacyFitValue) => normalizeHeroImageCornerStyle(value, legacyFitValue);
+var normalizeImageFit2 = (value) => normalizeHeroImageFit(value);
+var normalizeImageCornerStyle2 = (value, legacyFitValue) => normalizeHeroImageCornerStyle(value, legacyFitValue);
 var positionPercent = (value, fit) => {
   const resolved = fit === "cover" && (value === "left" || value === "right") ? "center" : value;
   switch (resolved) {
@@ -3758,6 +4051,12 @@ function getThemeColorOverride(tokens, colorKey) {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
 }
+function normalizeCustomClassName(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.split(/\s+/).map((className) => className.trim()).filter(Boolean).join(" ");
+}
 var sectionStyleFromBlock = (block, pageDefaults) => {
   const settings = isRecord6(block.settings) ? block.settings : {};
   const layoutSettings = isRecord6(settings.layout) ? settings.layout : {};
@@ -3851,7 +4150,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;
   }
@@ -3884,7 +4183,7 @@ function extractUploadedMedia(value) {
   if (!candidate || typeof candidate !== "object") {
     return null;
   }
-  const id = getRelationID2(candidate);
+  const id = getRelationID3(candidate);
   if (id === null) {
     return null;
   }
@@ -3895,11 +4194,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;
   }
@@ -4077,7 +4376,7 @@ function BuilderPageEditor({
       }
       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.");
@@ -4431,7 +4730,7 @@ function BuilderPageEditor({
       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),
@@ -4495,13 +4794,13 @@ function BuilderPageEditor({
     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;
       }
@@ -4513,15 +4812,15 @@ function BuilderPageEditor({
           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;
         }
@@ -4577,6 +4876,7 @@ function BuilderPageEditor({
     const inheritProjectStyles = options?.inheritProjectStyles === true;
     const shell = sectionStyleFromBlock(block, pageDefaults);
     const blockSettings = isRecord6(block.settings) ? block.settings : {};
+    const blockAdvanced = isRecord6(blockSettings.advanced) ? blockSettings.advanced : {};
     const blockTypography = isRecord6(blockSettings.typography) ? blockSettings.typography : {};
     const blockTheme = isRecord6(blockSettings.theme) ? blockSettings.theme : {};
     const heroBackgroundColor = normalizeText2(block.backgroundColor).trim();
@@ -4584,8 +4884,9 @@ function BuilderPageEditor({
     const heroMedia = block.blockType === "hero" ? resolveMedia(block.media) : null;
     const heroHasImage = block.blockType === "hero" && Boolean(heroBackgroundImageURL || heroMedia?.url);
     const heroTextColor = block.blockType === "hero" ? heroHasImage ? "#ffffff" : heroBackgroundColor ? getReadableTextColor(heroBackgroundColor, resolvedThemeTokens.colors.headingText, "#ffffff") : resolvedThemeTokens.colors.headingText : null;
+    const bodyAlign = blockTypography.bodyAlign === "center" || blockTypography.bodyAlign === "justify" || blockTypography.bodyAlign === "right" ? blockTypography.bodyAlign : "left";
     const typographyStyle = resolveTypographyStyleFromSettings({
-      bodyAlign: blockTypography.bodyAlign === "center" || blockTypography.bodyAlign === "justify" || blockTypography.bodyAlign === "right" ? blockTypography.bodyAlign : "left",
+      bodyAlign,
       letterSpacingPreset: blockTypography.letterSpacingPreset === "tight" || blockTypography.letterSpacingPreset === "relaxed" ? blockTypography.letterSpacingPreset : "normal",
       lineHeightPreset: blockTypography.lineHeightPreset === "tight" || blockTypography.lineHeightPreset === "relaxed" ? blockTypography.lineHeightPreset : "normal",
       maxTextWidth: blockTypography.maxTextWidth === "sm" || blockTypography.maxTextWidth === "md" || blockTypography.maxTextWidth === "lg" || blockTypography.maxTextWidth === "full" ? blockTypography.maxTextWidth : "auto"
@@ -4593,14 +4894,24 @@ function BuilderPageEditor({
     const headingAlign = blockTypography.headingAlign === "center" || blockTypography.headingAlign === "justify" || blockTypography.headingAlign === "right" ? blockTypography.headingAlign : "left";
     const headingColor = getThemeColorOverride(blockTheme, "headingText") || getThemeColorOverride(pageDefaults.themePage, "headingText") || getThemeColorOverride(siteThemeTokens, "headingText") || heroTextColor || resolvedThemeTokens.colors.headingText;
     const bodyColor = getThemeColorOverride(blockTheme, "bodyText") || getThemeColorOverride(pageDefaults.themePage, "bodyText") || getThemeColorOverride(siteThemeTokens, "bodyText") || heroTextColor || resolvedThemeTokens.colors.bodyText;
-    return /* @__PURE__ */ jsx13("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx13("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx13(
+    const customClassName = normalizeCustomClassName(blockAdvanced.customClassName ?? block.customClassName);
+    const hideOnMobile = Boolean(blockAdvanced.hideOnMobile ?? block.hideOnMobile);
+    const sectionClassName = [
+      className,
+      shell.sectionClass,
+      customClassName,
+      hideOnMobile ? "orion-builder-hide-mobile" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx13("section", { className: sectionClassName, style: shell.sectionStyle, children: /* @__PURE__ */ jsx13("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx13(
       "div",
       {
         className: shell.contentClass,
         style: {
           ...shell.contentStyle,
+          "--orion-builder-heading-align": headingAlign,
+          "--orion-builder-body-align": bodyAlign,
+          "--orion-builder-actions-align": bodyAlign === "center" ? "center" : bodyAlign === "right" ? "flex-end" : "flex-start",
           ...inheritProjectStyles ? {} : {
-            "--orion-builder-heading-align": headingAlign,
             "--orion-builder-heading-color": headingColor,
             color: bodyColor,
             ...typographyStyle
@@ -5087,8 +5398,8 @@ function BuilderPageEditor({
     }
   ] : [];
   const selectedMediaImageControls = selectedItemRecord && typeof selectedItemIndex === "number" && (selectedType === "featureGrid" || selectedType === "logoWall" || selectedType === "beforeAfter") ? {
-    cornerStyle: normalizeImageCornerStyle(selectedItemRecord.imageCornerStyle),
-    fit: normalizeImageFit(selectedItemRecord.imageFit),
+    cornerStyle: normalizeImageCornerStyle2(selectedItemRecord.imageCornerStyle),
+    fit: normalizeImageFit2(selectedItemRecord.imageFit),
     height: (() => {
       if (typeof selectedItemRecord.imageHeight === "number" && Number.isFinite(selectedItemRecord.imageHeight)) {
         return selectedItemRecord.imageHeight;
@@ -5563,8 +5874,8 @@ function BuilderPageEditor({
                               const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                               const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                               const itemImageStyle = getImagePresentationStyle({
-                                cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
-                                fit: normalizeImageFit(itemRecord?.imageFit),
+                                cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
+                                fit: normalizeImageFit2(itemRecord?.imageFit),
                                 positionX: itemPositionX,
                                 positionY: itemPositionY
                               });
@@ -5681,8 +5992,8 @@ function BuilderPageEditor({
                             const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                             const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                             const itemImageStyle = getImagePresentationStyle({
-                              cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
-                              fit: normalizeImageFit(itemRecord?.imageFit),
+                              cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
+                              fit: normalizeImageFit2(itemRecord?.imageFit),
                               positionX: itemPositionX,
                               positionY: itemPositionY
                             });
@@ -5888,8 +6199,8 @@ function BuilderPageEditor({
                         const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                         const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                         const imageStyle = getImagePresentationStyle({
-                          cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
-                          fit: normalizeImageFit(itemRecord?.imageFit),
+                          cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
+                          fit: normalizeImageFit2(itemRecord?.imageFit),
                           positionX: itemPositionX,
                           positionY: itemPositionY,
                           roundedRadius: 10
@@ -6002,8 +6313,8 @@ function BuilderPageEditor({
                             const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                             const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
                             const imageStyle = getImagePresentationStyle({
-                              cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
-                              fit: normalizeImageFit(itemRecord?.imageFit),
+                              cornerStyle: normalizeImageCornerStyle2(itemRecord?.imageCornerStyle),
+                              fit: normalizeImageFit2(itemRecord?.imageFit),
                               positionX: itemPositionX,
                               positionY: itemPositionY
                             });
@@ -6309,8 +6620,8 @@ function BuilderPageEditor({
               getImagePresentationStyle,
               index,
               isBlockUploadTarget,
-              normalizeImageCornerStyle,
-              normalizeImageFit,
+              normalizeImageCornerStyle: normalizeImageCornerStyle2,
+              normalizeImageFit: normalizeImageFit2,
               normalizeText: normalizeText2,
               onDropAt,
               renderWithSectionShell,
@@ -6539,23 +6850,32 @@ function BuilderPageEditor({
                                 blockType: selectedType,
                                 expandedItemIndex,
                                 items: selectedItems,
+                                isItemMediaUploading: isSelectedItemMediaUploading,
+                                mediaLibrary,
+                                mediaLibraryError,
+                                mediaLibraryLoading,
                                 mode: settingsPanelMode,
                                 onAddItem: appendDefaultItemToSelected,
                                 onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
+                                onRemoveItemMedia: (itemIndex, fieldName) => setSelectedItemMediaFieldFromLibrary(itemIndex, fieldName, ""),
+                                onSelectItemMedia: (itemIndex, fieldName, mediaID) => setSelectedItemMediaFieldFromLibrary(itemIndex, fieldName, mediaID),
                                 onToggleItem: toggleSelectedItem,
                                 onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
+                                onUpdateItemMediaPresentation: (itemIndex, fieldName, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, `media.${fieldName}`, value),
                                 onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
+                                onUploadItemMedia: uploadItemMediaFromV2,
                                 searchQuery: settingsSearchQuery,
-                                showInlineCopyFields: editCopyInPanelEnabled
+                                showInlineCopyFields: editCopyInPanelEnabled,
+                                uploadDisabled: uploadingTarget !== null
                               }
                             ) : null,
                             /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
-                              "Upload Alt Text",
+                              "New Upload Alt Text",
                               /* @__PURE__ */ jsx13(
                                 "input",
                                 {
                                   onChange: (event) => setUploadAltText(event.target.value),
-                                  placeholder: "Describe the image",
+                                  placeholder: "Used only when uploading a new image",
                                   style: sidebarInputStyle,
                                   type: "text",
                                   value: uploadAltText