@orion-studios/payload-studio 0.6.0-beta.54 → 0.6.0-beta.56

package/dist/admin/index.mjs

@@ -7,14 +7,14 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-KHK6RTGC.mjs";
+} from "../chunk-JC3UV74N.mjs";
+import "../chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "../chunk-ZTXJG4K5.mjs";
-import "../chunk-W2UOCJDX.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

package/dist/builder-v2/client.js

@@ -679,7 +679,77 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var chooseAsset = (editor, callback) => {
+var addJsonListItem = ({
+  listAttr,
+  model,
+  template
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  list.push(template);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var duplicateJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  const item = list[index];
+  if (!item) {
+    return;
+  }
+  list.splice(index + 1, 0, {
+    ...item,
+    title: typeof item.title === "string" ? `${item.title} copy` : item.title
+  });
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var removeJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list.splice(index, 1);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var parseTemplateAttribute = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  } catch {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+};
+var chooseAsset = (editor, currentSrc, callback) => {
   const assetManager = editor?.AssetManager;
   if (!assetManager?.open) {
     const src = window.prompt("Image URL");
@@ -688,6 +758,13 @@ var chooseAsset = (editor, callback) => {
     }
     return;
   }
+  if (currentSrc) {
+    assetManager.add?.({
+      name: `Current image - ${currentSrc.split("/").pop() || currentSrc}`,
+      src: currentSrc,
+      type: "image"
+    });
+  }
   assetManager.open({
     select(asset) {
       const src = typeof asset === "string" ? asset : asset && typeof asset === "object" && "get" in asset && typeof asset.get === "function" ? String(asset.get("src") || "") : asset && typeof asset === "object" && "src" in asset ? String(asset.src || "") : "";
@@ -703,12 +780,54 @@ var bindEditablePreview = (view, editor) => {
   if (!root) {
     return;
   }
+  root.querySelectorAll("[data-orion-action]").forEach((element) => {
+    const action = element.dataset.orionAction || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const listAttr = listName ? propToAttrName(listName) : "";
+    element.setAttribute("title", element.getAttribute("aria-label") || element.textContent?.trim() || "Section action");
+    element.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      editor.select?.(view.model);
+      if (!listAttr) {
+        return;
+      }
+      if (action === "add-list-item") {
+        addJsonListItem({
+          listAttr,
+          model: view.model,
+          template: parseTemplateAttribute(element.dataset.orionItemTemplate)
+        });
+        return;
+      }
+      if (!Number.isInteger(listIndex)) {
+        return;
+      }
+      if (action === "duplicate-list-item") {
+        duplicateJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+        return;
+      }
+      if (action === "remove-list-item") {
+        removeJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+      }
+    });
+  });
   root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
     const field = element.dataset.orionEditField || "";
     const listName = element.dataset.orionEditList || "";
     const listIndex = Number(element.dataset.orionEditIndex);
     const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
     const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
+    const placeholder = element.dataset.orionPlaceholder || "";
     element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
     element.style.cursor = "text";
     element.addEventListener("click", (event) => {
@@ -718,7 +837,8 @@ var bindEditablePreview = (view, editor) => {
         return;
       }
       element.style.cursor = "pointer";
-      chooseAsset(editor, (src) => {
+      const currentSrc = element instanceof HTMLImageElement ? element.currentSrc || element.src || "" : element.style.backgroundImage.replace(/^url\(["']?/, "").replace(/["']?\)$/, "");
+      chooseAsset(editor, currentSrc, (src) => {
         if (listName && Number.isInteger(listIndex)) {
           updateJsonListAttribute({
             field,
@@ -740,7 +860,8 @@ var bindEditablePreview = (view, editor) => {
     element.setAttribute("contenteditable", "true");
     element.setAttribute("spellcheck", "true");
     const commit = () => {
-      const value = element.innerText.trim();
+      const typedValue = element.innerText.trim();
+      const value = placeholder && typedValue === placeholder ? "" : typedValue;
       if (listName && Number.isInteger(listIndex)) {
         updateJsonListAttribute({
           field,
@@ -858,10 +979,58 @@ var getRelationID = (value) => {
   const id = value.id;
   return typeof id === "number" || typeof id === "string" ? id : null;
 };
+var normalizeAssetSrc = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (/^(https?:)?\/\//i.test(trimmed) || trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  return `/${trimmed}`;
+};
+var mediaDocImageCandidates = (doc) => {
+  const candidates = [];
+  if (doc.sizes && typeof doc.sizes === "object") {
+    Object.values(doc.sizes).forEach((size) => {
+      if (size?.url) {
+        candidates.push({ src: normalizeAssetSrc(size.url), width: size.width });
+      } else if (size?.filename) {
+        candidates.push({ src: `/api/media/file/${encodeURIComponent(size.filename)}`, width: size.width });
+      }
+    });
+  }
+  if (typeof doc.thumbnailURL === "string" && doc.thumbnailURL.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.thumbnailURL), width: 360 });
+  }
+  if (typeof doc.url === "string" && doc.url.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.url), width: doc.width });
+  }
+  if (typeof doc.filename === "string" && doc.filename.length > 0) {
+    candidates.push({ src: `/api/media/file/${encodeURIComponent(doc.filename)}`, width: doc.width });
+  }
+  return candidates.filter((candidate, index, all) => candidate.src && all.findIndex((item) => item.src === candidate.src) === index);
+};
+var pickMediaAssetSrc = (doc) => {
+  const candidates = mediaDocImageCandidates(doc);
+  if (candidates.length === 0) {
+    return "";
+  }
+  const absolute = candidates.find((candidate) => /^(https?:)?\/\//i.test(candidate.src));
+  if (absolute) {
+    return absolute.src;
+  }
+  const fullSize = candidates.find((candidate) => candidate.src === doc.url);
+  if (fullSize) {
+    return fullSize.src;
+  }
+  const widest = [...candidates].sort((left, right) => (right.width || 0) - (left.width || 0))[0];
+  return widest?.src || candidates[0]?.src || "";
+};
 var mediaDocToAsset = (doc) => {
   const id = getRelationID(doc);
   const filename = typeof doc.filename === "string" ? doc.filename : "";
-  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  const src = pickMediaAssetSrc(doc);
   if (id === null || !src) {
     return null;
   }
@@ -873,6 +1042,26 @@ var mediaDocToAsset = (doc) => {
     type: "image"
   };
 };
+var imageCanLoad = (src) => new Promise((resolve) => {
+  if (!src) {
+    resolve(false);
+    return;
+  }
+  const image = new Image();
+  image.onload = () => resolve(true);
+  image.onerror = () => resolve(false);
+  image.src = src;
+});
+var pruneBrokenImageAssets = async (editor) => {
+  const assetManager = editor.AssetManager;
+  const existingAssets = assetManager.getAll?.() || [];
+  for (const asset of existingAssets) {
+    const src = typeof asset.get === "function" ? String(asset.get("src") || "") : "";
+    if (src && !await imageCanLoad(src)) {
+      assetManager.remove?.(asset);
+    }
+  }
+};
 var extractUploadedMedia = (value) => {
   const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
   if (!candidate || typeof candidate !== "object") {
@@ -887,7 +1076,10 @@ var extractUploadedMedia = (value) => {
     alt: typeof typed.alt === "string" ? typed.alt : "",
     filename: typeof typed.filename === "string" ? typed.filename : "",
     id,
-    url: typeof typed.url === "string" ? typed.url : ""
+    sizes: typed.sizes && typeof typed.sizes === "object" ? typed.sizes : void 0,
+    thumbnailURL: typeof typed.thumbnailURL === "string" ? typed.thumbnailURL : "",
+    url: typeof typed.url === "string" ? typed.url : "",
+    width: typeof typed.width === "number" ? typed.width : void 0
   };
 };
 var loadPayloadMediaAssets = async (editor) => {
@@ -899,8 +1091,17 @@ var loadPayloadMediaAssets = async (editor) => {
     return;
   }
   const json = await response.json();
-  const assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
-  editor.AssetManager.add(assets);
+  const candidateAssets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  const assets = [];
+  for (const asset of candidateAssets) {
+    if (await imageCanLoad(asset.src)) {
+      assets.push(asset);
+    }
+  }
+  if (assets.length > 0) {
+    editor.AssetManager.add(assets);
+  }
+  await pruneBrokenImageAssets(editor);
 };
 var uploadPayloadMediaAssets = async (editor, files) => {
   const fileArray = Array.from(files);
@@ -950,6 +1151,7 @@ function GrapesPageEditor({
   const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
   const [saving, setSaving] = (0, import_react.useState)(null);
   const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
+  const [selectionSummary, setSelectionSummary] = (0, import_react.useState)(null);
   const [validationIssues, setValidationIssues] = (0, import_react.useState)([]);
   const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
   const pageTree = initialData?.meta?.pageTree || [];
@@ -1028,6 +1230,7 @@ function GrapesPageEditor({
           },
           storageManager: false,
           styleManager: {
+            appendTo: "#orion-builder-v2-styles",
             sectors: [
               {
                 name: "Layout",
@@ -1075,7 +1278,16 @@ function GrapesPageEditor({
             }
           }, autosaveIntervalMs);
         });
-        editor.on("component:selected", () => {
+        editor.on("component:selected", (component) => {
+          const typed = component;
+          const attrs = typed?.getAttributes?.() || {};
+          const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
+          const rawName = String(typed?.get?.("name") || componentType || "Section");
+          const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
+          setSelectionSummary({
+            label: label || "Section",
+            type: componentType
+          });
           setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
@@ -1293,11 +1505,6 @@ function GrapesPageEditor({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-blocks" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Inspector" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Validation" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
@@ -1309,6 +1516,9 @@ function GrapesPageEditor({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "orion-builder-v2-main", children: [
       loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
       error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-error", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
       saveMessage || lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-save-status", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: saveMessage || "Ready" }),
         lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
@@ -1316,7 +1526,16 @@ function GrapesPageEditor({
           lastSavedAt
         ] }) : null
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Design" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-styles" })
+      ] })
     ] })
   ] });
 }

package/dist/builder-v2/client.mjs

@@ -555,7 +555,77 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var chooseAsset = (editor, callback) => {
+var addJsonListItem = ({
+  listAttr,
+  model,
+  template
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  list.push(template);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var duplicateJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  const item = list[index];
+  if (!item) {
+    return;
+  }
+  list.splice(index + 1, 0, {
+    ...item,
+    title: typeof item.title === "string" ? `${item.title} copy` : item.title
+  });
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var removeJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list.splice(index, 1);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var parseTemplateAttribute = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  } catch {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+};
+var chooseAsset = (editor, currentSrc, callback) => {
   const assetManager = editor?.AssetManager;
   if (!assetManager?.open) {
     const src = window.prompt("Image URL");
@@ -564,6 +634,13 @@ var chooseAsset = (editor, callback) => {
     }
     return;
   }
+  if (currentSrc) {
+    assetManager.add?.({
+      name: `Current image - ${currentSrc.split("/").pop() || currentSrc}`,
+      src: currentSrc,
+      type: "image"
+    });
+  }
   assetManager.open({
     select(asset) {
       const src = typeof asset === "string" ? asset : asset && typeof asset === "object" && "get" in asset && typeof asset.get === "function" ? String(asset.get("src") || "") : asset && typeof asset === "object" && "src" in asset ? String(asset.src || "") : "";
@@ -579,12 +656,54 @@ var bindEditablePreview = (view, editor) => {
   if (!root) {
     return;
   }
+  root.querySelectorAll("[data-orion-action]").forEach((element) => {
+    const action = element.dataset.orionAction || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const listAttr = listName ? propToAttrName(listName) : "";
+    element.setAttribute("title", element.getAttribute("aria-label") || element.textContent?.trim() || "Section action");
+    element.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      editor.select?.(view.model);
+      if (!listAttr) {
+        return;
+      }
+      if (action === "add-list-item") {
+        addJsonListItem({
+          listAttr,
+          model: view.model,
+          template: parseTemplateAttribute(element.dataset.orionItemTemplate)
+        });
+        return;
+      }
+      if (!Number.isInteger(listIndex)) {
+        return;
+      }
+      if (action === "duplicate-list-item") {
+        duplicateJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+        return;
+      }
+      if (action === "remove-list-item") {
+        removeJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+      }
+    });
+  });
   root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
     const field = element.dataset.orionEditField || "";
     const listName = element.dataset.orionEditList || "";
     const listIndex = Number(element.dataset.orionEditIndex);
     const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
     const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
+    const placeholder = element.dataset.orionPlaceholder || "";
     element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
     element.style.cursor = "text";
     element.addEventListener("click", (event) => {
@@ -594,7 +713,8 @@ var bindEditablePreview = (view, editor) => {
         return;
       }
       element.style.cursor = "pointer";
-      chooseAsset(editor, (src) => {
+      const currentSrc = element instanceof HTMLImageElement ? element.currentSrc || element.src || "" : element.style.backgroundImage.replace(/^url\(["']?/, "").replace(/["']?\)$/, "");
+      chooseAsset(editor, currentSrc, (src) => {
         if (listName && Number.isInteger(listIndex)) {
           updateJsonListAttribute({
             field,
@@ -616,7 +736,8 @@ var bindEditablePreview = (view, editor) => {
     element.setAttribute("contenteditable", "true");
     element.setAttribute("spellcheck", "true");
     const commit = () => {
-      const value = element.innerText.trim();
+      const typedValue = element.innerText.trim();
+      const value = placeholder && typedValue === placeholder ? "" : typedValue;
       if (listName && Number.isInteger(listIndex)) {
         updateJsonListAttribute({
           field,
@@ -734,10 +855,58 @@ var getRelationID = (value) => {
   const id = value.id;
   return typeof id === "number" || typeof id === "string" ? id : null;
 };
+var normalizeAssetSrc = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (/^(https?:)?\/\//i.test(trimmed) || trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  return `/${trimmed}`;
+};
+var mediaDocImageCandidates = (doc) => {
+  const candidates = [];
+  if (doc.sizes && typeof doc.sizes === "object") {
+    Object.values(doc.sizes).forEach((size) => {
+      if (size?.url) {
+        candidates.push({ src: normalizeAssetSrc(size.url), width: size.width });
+      } else if (size?.filename) {
+        candidates.push({ src: `/api/media/file/${encodeURIComponent(size.filename)}`, width: size.width });
+      }
+    });
+  }
+  if (typeof doc.thumbnailURL === "string" && doc.thumbnailURL.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.thumbnailURL), width: 360 });
+  }
+  if (typeof doc.url === "string" && doc.url.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.url), width: doc.width });
+  }
+  if (typeof doc.filename === "string" && doc.filename.length > 0) {
+    candidates.push({ src: `/api/media/file/${encodeURIComponent(doc.filename)}`, width: doc.width });
+  }
+  return candidates.filter((candidate, index, all) => candidate.src && all.findIndex((item) => item.src === candidate.src) === index);
+};
+var pickMediaAssetSrc = (doc) => {
+  const candidates = mediaDocImageCandidates(doc);
+  if (candidates.length === 0) {
+    return "";
+  }
+  const absolute = candidates.find((candidate) => /^(https?:)?\/\//i.test(candidate.src));
+  if (absolute) {
+    return absolute.src;
+  }
+  const fullSize = candidates.find((candidate) => candidate.src === doc.url);
+  if (fullSize) {
+    return fullSize.src;
+  }
+  const widest = [...candidates].sort((left, right) => (right.width || 0) - (left.width || 0))[0];
+  return widest?.src || candidates[0]?.src || "";
+};
 var mediaDocToAsset = (doc) => {
   const id = getRelationID(doc);
   const filename = typeof doc.filename === "string" ? doc.filename : "";
-  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  const src = pickMediaAssetSrc(doc);
   if (id === null || !src) {
     return null;
   }
@@ -749,6 +918,26 @@ var mediaDocToAsset = (doc) => {
     type: "image"
   };
 };
+var imageCanLoad = (src) => new Promise((resolve) => {
+  if (!src) {
+    resolve(false);
+    return;
+  }
+  const image = new Image();
+  image.onload = () => resolve(true);
+  image.onerror = () => resolve(false);
+  image.src = src;
+});
+var pruneBrokenImageAssets = async (editor) => {
+  const assetManager = editor.AssetManager;
+  const existingAssets = assetManager.getAll?.() || [];
+  for (const asset of existingAssets) {
+    const src = typeof asset.get === "function" ? String(asset.get("src") || "") : "";
+    if (src && !await imageCanLoad(src)) {
+      assetManager.remove?.(asset);
+    }
+  }
+};
 var extractUploadedMedia = (value) => {
   const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
   if (!candidate || typeof candidate !== "object") {
@@ -763,7 +952,10 @@ var extractUploadedMedia = (value) => {
     alt: typeof typed.alt === "string" ? typed.alt : "",
     filename: typeof typed.filename === "string" ? typed.filename : "",
     id,
-    url: typeof typed.url === "string" ? typed.url : ""
+    sizes: typed.sizes && typeof typed.sizes === "object" ? typed.sizes : void 0,
+    thumbnailURL: typeof typed.thumbnailURL === "string" ? typed.thumbnailURL : "",
+    url: typeof typed.url === "string" ? typed.url : "",
+    width: typeof typed.width === "number" ? typed.width : void 0
   };
 };
 var loadPayloadMediaAssets = async (editor) => {
@@ -775,8 +967,17 @@ var loadPayloadMediaAssets = async (editor) => {
     return;
   }
   const json = await response.json();
-  const assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
-  editor.AssetManager.add(assets);
+  const candidateAssets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  const assets = [];
+  for (const asset of candidateAssets) {
+    if (await imageCanLoad(asset.src)) {
+      assets.push(asset);
+    }
+  }
+  if (assets.length > 0) {
+    editor.AssetManager.add(assets);
+  }
+  await pruneBrokenImageAssets(editor);
 };
 var uploadPayloadMediaAssets = async (editor, files) => {
   const fileArray = Array.from(files);
@@ -826,6 +1027,7 @@ function GrapesPageEditor({
   const [selectedDevice, setSelectedDevice] = useState("desktop");
   const [saving, setSaving] = useState(null);
   const [saveMessage, setSaveMessage] = useState("");
+  const [selectionSummary, setSelectionSummary] = useState(null);
   const [validationIssues, setValidationIssues] = useState([]);
   const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
   const pageTree = initialData?.meta?.pageTree || [];
@@ -904,6 +1106,7 @@ function GrapesPageEditor({
           },
           storageManager: false,
           styleManager: {
+            appendTo: "#orion-builder-v2-styles",
             sectors: [
               {
                 name: "Layout",
@@ -951,7 +1154,16 @@ function GrapesPageEditor({
             }
           }, autosaveIntervalMs);
         });
-        editor.on("component:selected", () => {
+        editor.on("component:selected", (component) => {
+          const typed = component;
+          const attrs = typed?.getAttributes?.() || {};
+          const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
+          const rawName = String(typed?.get?.("name") || componentType || "Section");
+          const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
+          setSelectionSummary({
+            label: label || "Section",
+            type: componentType
+          });
           setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
@@ -1169,11 +1381,6 @@ function GrapesPageEditor({
         /* @__PURE__ */ jsx("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
         /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-blocks" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
-        /* @__PURE__ */ jsx("h2", { children: "Inspector" }),
-        /* @__PURE__ */ jsx("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
-        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
-      ] }),
       /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ jsx("h2", { children: "Validation" }),
         /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ jsxs("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
@@ -1185,6 +1392,9 @@ function GrapesPageEditor({
     /* @__PURE__ */ jsxs("main", { className: "orion-builder-v2-main", children: [
       loading ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
       error ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-error", children: error }) : null,
+      /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
       saveMessage || lastSavedAt ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-save-status", children: [
         /* @__PURE__ */ jsx("strong", { children: saveMessage || "Ready" }),
         lastSavedAt ? /* @__PURE__ */ jsxs("span", { children: [
@@ -1192,7 +1402,16 @@ function GrapesPageEditor({
           lastSavedAt
         ] }) : null
       ] }) : null,
-      /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
+        /* @__PURE__ */ jsx("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Design" }),
+        /* @__PURE__ */ jsx("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-styles" })
+      ] })
     ] })
   ] });
 }

package/dist/builder-v2/styles.css

@@ -12,7 +12,7 @@
   color: var(--builder-v2-ink);
   display: grid;
   font-family: var(--font-xo-sans, var(--font-body, ui-sans-serif, system-ui, sans-serif));
-  grid-template-columns: minmax(292px, 336px) 1fr;
+  grid-template-columns: minmax(292px, 336px) minmax(0, 1fr) minmax(300px, 360px);
   grid-template-rows: auto minmax(0, 1fr);
   height: 100dvh;
   min-height: 640px;
@@ -94,9 +94,9 @@
   color: #ffffff;
 }
 
-.orion-builder-v2-sidebar {
+.orion-builder-v2-sidebar,
+.orion-builder-v2-inspector {
   background: #fbf7f1;
-  border-right: 1px solid var(--builder-v2-border);
   display: grid;
   gap: 14px;
   grid-auto-rows: max-content;
@@ -104,6 +104,14 @@
   padding: 14px;
 }
 
+.orion-builder-v2-sidebar {
+  border-right: 1px solid var(--builder-v2-border);
+}
+
+.orion-builder-v2-inspector {
+  border-left: 1px solid var(--builder-v2-border);
+}
+
 .orion-builder-v2-panel {
   background: var(--builder-v2-panel);
   border: 1px solid var(--builder-v2-border);
@@ -201,7 +209,8 @@
   display: grid;
   gap: 2px;
   left: auto;
-  right: 16px;
+  position: static;
+  right: auto;
 }
 
 .orion-builder-v2-save-status span {
@@ -330,6 +339,77 @@
   font-weight: 800;
 }
 
+.orion-builder-v2-editor .gjs-traits-label {
+  display: none;
+}
+
+.orion-builder-v2-editor .gjs-trt-traits {
+  display: grid;
+  gap: 10px;
+}
+
+.orion-builder-v2-editor .gjs-trt-trait {
+  display: grid;
+  gap: 6px;
+}
+
+.orion-builder-v2-editor .gjs-sm-sectors {
+  display: grid;
+  gap: 10px;
+}
+
+.orion-builder-v2-editor .gjs-sm-sector {
+  border: 1px solid var(--builder-v2-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.orion-builder-v2-editor .gjs-sm-properties {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.orion-builder-v2-editor .gjs-sm-property {
+  float: none;
+  margin: 0;
+  width: 100%;
+}
+
+.orion-builder-v2-editor .gjs-field input,
+.orion-builder-v2-editor .gjs-field select,
+.orion-builder-v2-editor .gjs-field textarea {
+  min-height: 36px;
+}
+
+.orion-builder-v2-editor .gjs-field textarea {
+  min-height: 96px;
+}
+
+.orion-builder-v2-editor [data-orion-placeholder] {
+  outline: 1px dashed rgba(199, 100, 61, 0.45);
+  outline-offset: 4px;
+}
+
+.orion-builder-v2-editor [data-orion-action] {
+  background: #fffaf4;
+  border: 1px solid #e7cbb9;
+  border-radius: 999px;
+  color: var(--builder-v2-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.76rem;
+  font-weight: 900;
+  min-height: 32px;
+  padding: 6px 10px;
+}
+
+.orion-builder-v2-editor [data-orion-action]:hover {
+  background: var(--builder-v2-ink);
+  border-color: var(--builder-v2-ink);
+  color: #ffffff;
+}
+
 .orion-builder-v2-html-chunk {
   display: contents;
 }
@@ -939,7 +1019,7 @@
 @media (max-width: 800px) {
   .orion-builder-v2-editor {
     grid-template-columns: 1fr;
-    grid-template-rows: auto auto 1fr;
+    grid-template-rows: auto auto 1fr auto;
   }
 
   .orion-builder-v2-topbar {
@@ -947,7 +1027,8 @@
     flex-direction: column;
   }
 
-  .orion-builder-v2-sidebar {
+  .orion-builder-v2-sidebar,
+  .orion-builder-v2-inspector {
     max-height: 260px;
   }
 

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-KHK6RTGC.mjs";
+} from "./chunk-JC3UV74N.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
 import {
   studio_pages_exports
-} from "./chunk-7HME6R2V.mjs";
+} from "./chunk-NGLIA2OE.mjs";
+import "./chunk-OQSEJXC4.mjs";
 import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
-import "./chunk-OQSEJXC4.mjs";
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
-import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

@@ -7,7 +7,8 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-7HME6R2V.mjs";
+} from "../chunk-NGLIA2OE.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -15,7 +16,6 @@ import {
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.54",
+  "version": "0.6.0-beta.56",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package/dist/{chunk-KHK6RTGC.mjs → chunk-JC3UV74N.mjs}

@@ -1,12 +1,12 @@
+import {
+  adminNavIcons
+} from "./chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "./chunk-ZTXJG4K5.mjs";
-import {
-  adminNavIcons
-} from "./chunk-W2UOCJDX.mjs";
 import {
   __export,
   __require

package/dist/{chunk-7HME6R2V.mjs → chunk-NGLIA2OE.mjs}

@@ -1,3 +1,6 @@
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -11,9 +14,6 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";