@orion-studios/payload-studio 0.6.0-beta.13 → 0.6.0-beta.130

package/dist/studio-pages/client.mjs

@@ -6,7 +6,7 @@ import {
 } from "../chunk-ROTPP5CU.mjs";
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
-import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 
 // src/blocks/blocks/sectionStyleFields.ts
 var sectionStyleDefaults = {
@@ -70,7 +70,9 @@ var defaultBuilderBlockSettingsV2 = {
   },
   typography: {
     bodyAlign: "left",
+    bodySizePt: null,
     headingAlign: "left",
+    headingSizePt: null,
     letterSpacingPreset: "normal",
     lineHeightPreset: "normal",
     maxTextWidth: "auto"
@@ -99,7 +101,9 @@ var defaultBuilderItemSettingsV2 = {
   },
   typography: {
     bodyAlign: "left",
+    bodySizePt: null,
     headingAlign: "left",
+    headingSizePt: null,
     letterSpacingPreset: "normal",
     lineHeightPreset: "normal",
     maxTextWidth: "auto"
@@ -129,6 +133,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));
@@ -153,6 +158,18 @@ var parsePixel = (value) => {
   }
   return null;
 };
+var parsePoint = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Math.max(6, Math.min(120, Math.round(value)));
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return Math.max(6, Math.min(120, Math.round(parsed)));
+    }
+  }
+  return null;
+};
 var mergeSettings = (defaults, input) => {
   if (!isRecord(input)) {
     return structuredClone(defaults);
@@ -171,6 +188,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,15 +228,28 @@ 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.headingSizePt = parsePoint(block.textHeadingSizePt);
+  current.typography.bodySizePt = parsePoint(block.textBodySizePt);
   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;
   current.advanced.editCopyInPanel = Boolean(block.editCopyInPanel ?? current.advanced.editCopyInPanel);
   current.advanced.customClassName = typeof block.customClassName === "string" ? block.customClassName : current.advanced.customClassName;
   current.advanced.hideOnMobile = Boolean(block.hideOnMobile ?? current.advanced.hideOnMobile);
-  return mergeSettings(current, block.settings);
+  const settings = mergeSettings(current, block.settings);
+  if (block.blockType === "hero") {
+    const top = settings.layout.paddingTopPt;
+    const bottom = settings.layout.paddingBottomPt;
+    const hasLegacyLinkedHeroPadding = settings.layout.linkVerticalPadding !== false && (top === null || typeof top === "undefined" || top === 30) && (bottom === null || typeof bottom === "undefined" || bottom === 30 || bottom === 20);
+    if (hasLegacyLinkedHeroPadding) {
+      settings.layout.linkVerticalPadding = false;
+      settings.layout.paddingTopPt = 30;
+      settings.layout.paddingBottomPt = 20;
+    }
+  }
+  return settings;
 };
 var v2SettingsToLegacyBlock = (blockWithSettings) => {
   const settings = legacyBlockToV2Settings(blockWithSettings);
@@ -241,6 +275,8 @@ var v2SettingsToLegacyBlock = (blockWithSettings) => {
   next.contentGradientAngle = settings.appearance.contentGradientAngle;
   next.textHeadingAlign = settings.typography.headingAlign;
   next.textBodyAlign = settings.typography.bodyAlign;
+  next.textHeadingSizePt = settings.typography.headingSizePt;
+  next.textBodySizePt = settings.typography.bodySizePt;
   next.textMaxWidth = settings.typography.maxTextWidth;
   next.textLineHeightPreset = settings.typography.lineHeightPreset;
   next.textLetterSpacingPreset = settings.typography.letterSpacingPreset;
@@ -335,6 +371,7 @@ var resolveTypographyStyleFromSettings = (settings) => {
   const letterSpacing = settings.letterSpacingPreset === "tight" ? "-0.01em" : settings.letterSpacingPreset === "relaxed" ? "0.02em" : "0.01em";
   const maxWidth = settings.maxTextWidth === "sm" ? "36ch" : settings.maxTextWidth === "md" ? "52ch" : settings.maxTextWidth === "lg" ? "72ch" : settings.maxTextWidth === "full" ? "100%" : void 0;
   return {
+    ...typeof settings.bodySizePt === "number" && Number.isFinite(settings.bodySizePt) ? { fontSize: `${settings.bodySizePt}pt` } : {},
     letterSpacing,
     lineHeight,
     maxWidth,
@@ -343,7 +380,7 @@ var resolveTypographyStyleFromSettings = (settings) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-import { useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 
 // src/studio-pages/builder/ui/Accordion.tsx
 import { useEffect, useState } from "react";
@@ -504,8 +541,52 @@ var alignOptions = [
   { label: "Right", value: "right" },
   { label: "Justify", value: "justify" }
 ];
-var layoutFieldSet = [];
+var layoutFieldSet = [
+  {
+    group: "layout",
+    key: "settings.layout.linkVerticalPadding",
+    label: "Link Top/Bottom Padding",
+    tags: ["spacing", "padding", "vertical"],
+    type: "checkbox"
+  },
+  {
+    group: "layout",
+    key: "settings.layout.paddingTopPt",
+    label: "Top Padding (pt)",
+    max: 240,
+    min: 0,
+    tags: ["spacing", "padding", "top"],
+    type: "number"
+  },
+  {
+    group: "layout",
+    key: "settings.layout.paddingBottomPt",
+    label: "Bottom Padding (pt)",
+    max: 240,
+    min: 0,
+    tags: ["spacing", "padding", "bottom"],
+    type: "number"
+  }
+];
 var typographyFieldSet = [
+  {
+    group: "typography",
+    key: "settings.typography.headingSizePt",
+    label: "Heading Text Size (pt)",
+    max: 120,
+    min: 6,
+    tags: ["text", "size", "heading", "font"],
+    type: "number"
+  },
+  {
+    group: "typography",
+    key: "settings.typography.bodySizePt",
+    label: "Body Text Size (pt)",
+    max: 72,
+    min: 6,
+    tags: ["text", "size", "body", "paragraph", "font"],
+    type: "number"
+  },
   {
     group: "typography",
     key: "settings.typography.headingAlign",
@@ -612,6 +693,7 @@ var mediaFieldSet = [
 ];
 var commonInspectorGroups = [
   { key: "basics", label: "Basics" },
+  { key: "layout", label: "Layout" },
   { key: "typography", label: "Typography" },
   { key: "media", label: "Media" },
   { key: "advanced", label: "Advanced" }
@@ -728,6 +810,13 @@ var inspectorDefinitionByBlockType = {
       { group: "basics", inlineEditable: true, key: "kicker", label: "Kicker", type: "text" },
       { group: "basics", inlineEditable: true, key: "headline", label: "Headline", type: "text" },
       { group: "basics", inlineEditable: true, key: "subheadline", label: "Subheadline", type: "textarea" },
+      {
+        group: "basics",
+        key: "settings.marquee.itemsText",
+        label: "Scrolling Bar Options",
+        tags: ["marquee", "scrolling", "bar", "categories"],
+        type: "textarea"
+      },
       {
         group: "basics",
         key: "variant",
@@ -897,6 +986,69 @@ var normalizeNumber = (value, fallback) => {
   }
   return fallback;
 };
+var sectionPaddingPointMap = {
+  none: 0,
+  sm: 17,
+  md: 31,
+  lg: 41
+};
+var heroDefaultPaddingTopPt = 30;
+var heroDefaultPaddingBottomPt = 20;
+var defaultTextSizePointMap = {
+  cta: { body: 14, heading: 36 },
+  faq: { body: 12, heading: 18 },
+  featureGrid: { body: 12, heading: 36 },
+  formEmbed: { body: 12, heading: 36 },
+  hero: { body: 14, heading: 48 },
+  media: { body: 12, heading: 36 },
+  richText: { body: 12, heading: 39 },
+  stats: { body: 11, heading: 30 },
+  testimonials: { body: 12, heading: 36 }
+};
+var normalizeSectionPaddingY = (value) => value === "none" || value === "sm" || value === "lg" ? value : "md";
+var normalizePaddingPointValue = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Math.max(0, Math.min(240, Math.round(value)));
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return Math.max(0, Math.min(240, Math.round(parsed)));
+    }
+  }
+  return null;
+};
+var normalizeTextSizePointValue = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Math.max(6, Math.min(120, Math.round(value)));
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return Math.max(6, Math.min(120, Math.round(parsed)));
+    }
+  }
+  return null;
+};
+var getEffectiveVerticalPaddingValue = (block, key) => {
+  const explicit = normalizePaddingPointValue(getByPath(block, key));
+  if (explicit !== null) {
+    return explicit;
+  }
+  const layoutSectionPaddingY = getByPath(block, "settings.layout.sectionPaddingY");
+  const legacySectionPaddingY = block.sectionPaddingY;
+  const inherited = block.blockType === "hero" ? key === "settings.layout.paddingBottomPt" ? heroDefaultPaddingBottomPt : heroDefaultPaddingTopPt : sectionPaddingPointMap[normalizeSectionPaddingY(layoutSectionPaddingY || legacySectionPaddingY)];
+  return inherited;
+};
+var getEffectiveTextSizeValue = (block, key) => {
+  const explicit = normalizeTextSizePointValue(getByPath(block, key));
+  if (explicit !== null) {
+    return explicit;
+  }
+  const blockType = typeof block.blockType === "string" ? block.blockType : "";
+  const defaults = defaultTextSizePointMap[blockType] || { body: 12, heading: 36 };
+  return key === "settings.typography.headingSizePt" ? defaults.heading : defaults.body;
+};
 var getRelationID = (value) => {
   if (typeof value === "number" || typeof value === "string") {
     return value;
@@ -925,6 +1077,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,
@@ -945,6 +1103,21 @@ function BlockInspectorRenderer({
     media: false,
     typography: false
   });
+  const [supportsEyeDropper, setSupportsEyeDropper] = useState2(false);
+  useEffect2(() => {
+    setSupportsEyeDropper(Boolean(window.EyeDropper));
+  }, []);
+  const pickColorFromScreen = async (onSelect) => {
+    const EyeDropper = window.EyeDropper;
+    if (!EyeDropper) {
+      return;
+    }
+    try {
+      const result = await new EyeDropper().open();
+      onSelect(result.sRGBHex);
+    } catch {
+    }
+  };
   const definition = inspectorDefinitionByBlockType[blockType];
   const fields = definition?.fields || [];
   const resolvedFields = useMemo(() => {
@@ -1048,8 +1221,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",
@@ -1059,6 +1233,26 @@ function BlockInspectorRenderer({
                   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,
+                    selectedSourceMedia?.url ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      /* @__PURE__ */ jsx3(
+                        "img",
+                        {
+                          alt: selectedSourceMedia.alt || source.label,
+                          src: selectedSourceMedia.url,
+                          style: {
+                            aspectRatio: "16 / 9",
+                            border: "1px solid rgba(35, 51, 82, 0.14)",
+                            borderRadius: 10,
+                            display: "block",
+                            marginBottom: "0.7rem",
+                            objectFit: effectiveMedia.fit,
+                            objectPosition: `${effectiveMedia.positionX}% ${effectiveMedia.positionY}%`,
+                            width: "100%"
+                          }
+                        }
+                      )
+                    ) : /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-empty", children: "No image selected." }),
                     /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
                       source.label,
                       /* @__PURE__ */ jsxs3(
@@ -1074,6 +1268,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",
                       {
@@ -1130,19 +1328,20 @@ function BlockInspectorRenderer({
               }
             ) : null,
             (hasMediaGroupContent ? group.fields.filter((field) => !(group.key === "media" && field.key.startsWith("settings.media."))) : group.fields).map((field) => {
-              if (field.key === "settings.layout.paddingBottomPt" && Boolean(getByPath(block, "settings.layout.linkVerticalPadding"))) {
+              if (field.key === "settings.layout.paddingBottomPt" && getByPath(block, "settings.layout.linkVerticalPadding") !== false && block.blockType !== "hero") {
                 return null;
               }
-              if (field.key === "settings.layout.paddingRightPt" && Boolean(getByPath(block, "settings.layout.linkHorizontalPadding"))) {
+              if (field.key === "settings.layout.paddingRightPt" && getByPath(block, "settings.layout.linkHorizontalPadding") !== false) {
                 return null;
               }
               const fieldValue = getByPath(block, field.key);
               if (field.type === "checkbox") {
+                const checked = field.key === "settings.layout.linkVerticalPadding" || field.key === "settings.layout.linkHorizontalPadding" ? typeof fieldValue === "boolean" ? fieldValue : block.blockType === "hero" ? false : true : Boolean(fieldValue);
                 return /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label is-checkbox", children: [
                   /* @__PURE__ */ jsx3(
                     "input",
                     {
-                      checked: Boolean(fieldValue),
+                      checked,
                       onChange: (event) => updateForKey(field.key, event.target.checked),
                       type: "checkbox"
                     }
@@ -1165,8 +1364,10 @@ function BlockInspectorRenderer({
                 ] }, field.key);
               }
               if (field.type === "number") {
-                const numberValue = typeof fieldValue === "number" ? fieldValue : typeof fieldValue === "string" && fieldValue.trim().length > 0 ? Number(fieldValue) : null;
-                const resolvedValue = typeof numberValue === "number" && Number.isFinite(numberValue) ? numberValue : "";
+                const isPaddingPointField = field.key === "settings.layout.paddingTopPt" || field.key === "settings.layout.paddingBottomPt";
+                const isTextSizePointField = field.key === "settings.typography.headingSizePt" || field.key === "settings.typography.bodySizePt";
+                const numberValue = isTextSizePointField ? normalizeTextSizePointValue(fieldValue) : normalizePaddingPointValue(fieldValue);
+                const resolvedValue = numberValue !== null ? numberValue : isPaddingPointField ? getEffectiveVerticalPaddingValue(block, field.key) : isTextSizePointField ? getEffectiveTextSizeValue(block, field.key) : "";
                 return /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
                   field.label,
                   /* @__PURE__ */ jsx3(
@@ -1210,15 +1411,35 @@ function BlockInspectorRenderer({
               if (field.type === "color") {
                 return /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
                   field.label,
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      className: "orion-builder-settings-input is-color",
-                      onChange: (event) => updateForKey(field.key, event.target.value),
-                      type: "color",
-                      value: typeof fieldValue === "string" && fieldValue.length > 0 ? fieldValue : "#ffffff"
-                    }
-                  )
+                  /* @__PURE__ */ jsxs3("span", { className: "orion-builder-settings-color-control", children: [
+                    /* @__PURE__ */ jsx3(
+                      "input",
+                      {
+                        className: "orion-builder-settings-input is-color",
+                        onChange: (event) => updateForKey(field.key, event.target.value),
+                        type: "color",
+                        value: typeof fieldValue === "string" && fieldValue.length > 0 ? fieldValue : "#ffffff"
+                      }
+                    ),
+                    supportsEyeDropper ? /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        "aria-label": `Pick ${field.label} from screen`,
+                        className: "orion-builder-settings-eyedropper",
+                        "data-orion-color-eyedropper": "true",
+                        onClick: () => pickColorFromScreen((color) => updateForKey(field.key, color)),
+                        title: "Pick color from screen",
+                        type: "button",
+                        children: /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+                          "path",
+                          {
+                            d: "M14.7 4.3a2.4 2.4 0 0 1 3.4 0l1.6 1.6a2.4 2.4 0 0 1 0 3.4l-1.2 1.2 1 1a1 1 0 1 1-1.4 1.4l-1-1-8.9 8.9H4v-4.2l8.9-8.9-1-1a1 1 0 0 1 1.4-1.4l1 1 1.4-1.4Zm-.4 4.8-8.3 8.3V19h1.6l8.3-8.3-1.6-1.6Z",
+                            fill: "currentColor"
+                          }
+                        ) })
+                      }
+                    ) : null
+                  ] })
                 ] }, field.key);
               }
               return /* @__PURE__ */ jsxs3("label", { className: "orion-builder-settings-label", children: [
@@ -1477,7 +1698,7 @@ var pageInspectorPanels = pageInspectorPanelRegistry.map((entry) => ({
 }));
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 
 // src/studio-pages/builder/sidebar/types.ts
 var isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
@@ -1485,7 +1706,7 @@ var isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSec
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
 function usePersistentSidebarPanel(pageID) {
   const [activeSidebarPanel, setActiveSidebarPanel] = useState3("selected");
-  useEffect2(() => {
+  useEffect3(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     const raw = window.localStorage.getItem(storageKey);
     if (!raw) {
@@ -1511,7 +1732,7 @@ function usePersistentSidebarPanel(pageID) {
     } catch {
     }
   }, [pageID]);
-  useEffect2(() => {
+  useEffect3(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     window.localStorage.setItem(storageKey, JSON.stringify({ activePanel: activeSidebarPanel }));
   }, [activeSidebarPanel, pageID]);
@@ -1790,7 +2011,7 @@ var registerBuilderBlockPreviewRenderer = (renderer) => {
 var getRegisteredBuilderBlockPreviewRenderer = () => globalScope.__ORION_STUDIO_BUILDER_BLOCK_PREVIEW_RENDERER__ ?? null;
 
 // src/studio-pages/builder/ui/InlineText.tsx
-import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function InlineText({
   as = "p",
@@ -1810,7 +2031,7 @@ function InlineText({
     }
     return raw.replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim();
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!editing || !editableRef.current) {
       return;
     }
@@ -1888,7 +2109,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
 }
 
 // src/studio-pages/builder/ui/BlockFrame.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function BlockFrame({
   children,
@@ -1908,7 +2129,7 @@ function BlockFrame({
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
   const showDropBefore = isDropTarget && dropPosition === "before";
   const showDropAfter = isDropTarget && dropPosition === "after";
-  useEffect4(() => {
+  useEffect5(() => {
     if (dragIndex === null) {
       setDropPosition(null);
       setDropHovered(false);
@@ -2129,8 +2350,8 @@ function renderSimpleBlockPreview(args) {
     getImagePresentationStyle: getImagePresentationStyle2,
     index,
     isBlockUploadTarget,
-    normalizeImageCornerStyle: normalizeImageCornerStyle2,
-    normalizeImageFit: normalizeImageFit2,
+    normalizeImageCornerStyle: normalizeImageCornerStyle3,
+    normalizeImageFit: normalizeImageFit3,
     normalizeText: normalizeText3,
     onDropAt,
     renderWithSectionShell,
@@ -2314,8 +2535,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 +3066,76 @@ 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 mediaFromImageURL = (url, fallbackLabel) => {
+  if (typeof url !== "string" || url.trim().length === 0) {
+    return null;
+  }
+  const normalizedURL = url.trim();
+  const filename = normalizedURL.split("/").filter(Boolean).pop() || fallbackLabel;
+  return {
+    alt: fallbackLabel,
+    filename,
+    id: `url:${normalizedURL}`,
+    url: normalizedURL
+  };
+};
+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 +3182,148 @@ 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 directImageURL = normalizeText(item[imageURLFieldName]);
+  const selectedRelationMedia = toMediaLibraryItem2(item[fieldName]) ?? mediaFromImageURL(directImageURL, label);
+  const selectedMediaID = getRelationID2(item[fieldName]) ?? selectedRelationMedia?.id ?? null;
+  const selectedMedia = selectedRelationMedia ?? findMediaLibraryItem2(mediaLibrary, selectedMediaID);
+  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 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);
+          onUpdateItemField(itemIndex, imageURLFieldName, "");
+        },
+        type: "button",
+        children: "Remove Image"
+      }
+    ),
+    /* @__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 +3473,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 +3523,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 +3574,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: [
@@ -3284,6 +3786,19 @@ var resolveMedia = (value) => {
   }
   return null;
 };
+var mediaFromImageURL2 = (url, fallbackLabel = "Current image") => {
+  if (typeof url !== "string" || url.trim().length === 0) {
+    return null;
+  }
+  const normalizedURL = url.trim();
+  const filename = normalizedURL.split("/").filter(Boolean).pop() || fallbackLabel;
+  return {
+    alt: fallbackLabel,
+    filename,
+    id: `url:${normalizedURL}`,
+    url: normalizedURL
+  };
+};
 var resolveMediaWithURL = (value, imageURL, alt) => {
   const resolved = resolveMedia(value);
   if (resolved?.url) {
@@ -3325,8 +3840,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) {
@@ -3495,6 +4010,8 @@ var sectionPaddingMap = {
   md: "2.6rem",
   lg: "3.4rem"
 };
+var heroDefaultPaddingTop = "30pt";
+var heroDefaultPaddingBottom = "20pt";
 var quickAddBlockTypes = [
   "hero",
   "featureGrid",
@@ -3758,6 +4275,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 : {};
@@ -3843,15 +4366,15 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
     } : {},
     sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault} padx-${resolvedSectionPaddingX}`,
     sectionInnerStyle: {
-      paddingBottom: customPaddingBottom === null ? sectionPaddingMap[sectionPaddingY] : `${customPaddingBottom}pt`,
+      paddingBottom: customPaddingBottom === null ? block.blockType === "hero" ? heroDefaultPaddingBottom : sectionPaddingMap[sectionPaddingY] : `${customPaddingBottom}pt`,
       paddingLeft: customPaddingLeft === null ? void 0 : `${customPaddingLeft}pt`,
       paddingRight: customPaddingRight === null ? void 0 : `${customPaddingRight}pt`,
-      paddingTop: customPaddingTop === null ? sectionPaddingMap[sectionPaddingY] : `${customPaddingTop}pt`
+      paddingTop: customPaddingTop === null ? block.blockType === "hero" ? heroDefaultPaddingTop : sectionPaddingMap[sectionPaddingY] : `${customPaddingTop}pt`
     },
     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 +4407,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 +4418,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;
   }
@@ -4032,7 +4555,7 @@ function BuilderPageEditor({
   const selectedBlockAdvancedSettings = isRecord6(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 selectedBlockMediaValue = selectedType === "hero" ? selectedBlock?.media ?? mediaFromImageURL2(selectedBlock?.backgroundImageURL, "Hero image") : selectedType === "media" ? selectedBlock?.image ?? mediaFromImageURL2(selectedBlock?.imageURL, "Section image") : null;
   const selectedItemRecord = typeof selectedItemIndex === "number" && selectedItemIndex >= 0 && selectedItemIndex < selectedItems.length && isRecord6(selectedItems[selectedItemIndex]) ? selectedItems[selectedItemIndex] : null;
   const editCopyInPanelEnabled = Boolean(selectedBlockAdvancedSettings.editCopyInPanel);
   const isBlockUploadTarget = (blockIndex, kind) => selectedIndex === blockIndex && uploadingTarget?.kind === kind;
@@ -4077,7 +4600,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.");
@@ -4085,10 +4608,10 @@ function BuilderPageEditor({
       setMediaLibraryLoading(false);
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     void loadMediaLibrary();
   }, [loadMediaLibrary]);
-  useEffect5(() => {
+  useEffect6(() => {
     const refreshMediaLibrary = () => {
       void loadMediaLibrary();
     };
@@ -4113,7 +4636,7 @@ function BuilderPageEditor({
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
   }, [loadMediaLibrary]);
-  useEffect5(() => {
+  useEffect6(() => {
     let active = true;
     const checkSession = async () => {
       try {
@@ -4431,7 +4954,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 +5018,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 +5036,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 +5100,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,23 +5108,35 @@ 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",
+      bodySizePt: typeof blockTypography.bodySizePt === "number" && Number.isFinite(blockTypography.bodySizePt) ? blockTypography.bodySizePt : null,
       maxTextWidth: blockTypography.maxTextWidth === "sm" || blockTypography.maxTextWidth === "md" || blockTypography.maxTextWidth === "lg" || blockTypography.maxTextWidth === "full" ? blockTypography.maxTextWidth : "auto"
     });
     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
@@ -4825,7 +5361,7 @@ function BuilderPageEditor({
     }),
     [layout, pageDefaults]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const readTopViewportHeight = () => {
       if (typeof window === "undefined") {
         setTopViewportHeight(null);
@@ -4984,14 +5520,14 @@ function BuilderPageEditor({
       setSavingStatus(null);
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (selectedIndex === null) {
       return;
     }
     setSidebarOpen(true);
     setActiveSidebarPanel("selected");
   }, [selectedIndex]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (selectedIndex === null) {
       setSelectedItemIndex(null);
       setExpandedItemIndex(null);
@@ -5009,7 +5545,7 @@ function BuilderPageEditor({
       (current) => typeof current === "number" && current >= 0 && current < selectedItems.length ? current : 0
     );
   }, [selectedIndex, selectedItems.length]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (layout.length > 0) {
       return;
     }
@@ -5087,8 +5623,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;
@@ -5106,10 +5642,10 @@ function BuilderPageEditor({
     positionX: parsePercentNumber(selectedItemRecord.imagePositionX, 50),
     positionY: parsePercentNumber(selectedItemRecord.imagePositionY, 50)
   } : void 0;
-  useEffect5(() => {
+  useEffect6(() => {
     return;
   }, [layout]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
       previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
@@ -5120,7 +5656,7 @@ function BuilderPageEditor({
     setFutureSnapshots([]);
     previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
   }, [currentSnapshot]);
-  useEffect5(() => {
+  useEffect6(() => {
     const onKeyDown = (event) => {
       const key = event.key.toLowerCase();
       const isUndo = (event.metaKey || event.ctrlKey) && key === "z" && !event.shiftKey;
@@ -5138,7 +5674,7 @@ function BuilderPageEditor({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [canRedo, canUndo, futureSnapshots, pastSnapshots, currentSnapshot]);
-  useEffect5(() => {
+  useEffect6(() => {
     window.parent?.postMessage(
       {
         dirty: isDirty,
@@ -5148,7 +5684,7 @@ function BuilderPageEditor({
       "*"
     );
   }, [isDirty]);
-  useEffect5(() => {
+  useEffect6(() => {
     window.parent?.postMessage(
       {
         canRedo,
@@ -5159,7 +5695,7 @@ function BuilderPageEditor({
       "*"
     );
   }, [canRedo, canUndo]);
-  useEffect5(() => {
+  useEffect6(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-parent") {
@@ -5212,7 +5748,7 @@ function BuilderPageEditor({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [canRedo, canUndo, isDirty, layout, pageDefaults.pageWidthDefault, title]);
-  useEffect5(() => {
+  useEffect6(() => {
     const preventNavigationWhileEditing = (event) => {
       const editorRoot = editorRootRef.current;
       if (!editorRoot) {
@@ -5563,8 +6099,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 +6217,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 +6424,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 +6538,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 +6845,8 @@ function BuilderPageEditor({
               getImagePresentationStyle,
               index,
               isBlockUploadTarget,
-              normalizeImageCornerStyle,
-              normalizeImageFit,
+              normalizeImageCornerStyle: normalizeImageCornerStyle2,
+              normalizeImageFit: normalizeImageFit2,
               normalizeText: normalizeText2,
               onDropAt,
               renderWithSectionShell,
@@ -6539,23 +7075,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