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

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,7 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var chooseAsset = (editor, callback) => {
+var chooseAsset = (editor, currentSrc, callback) => {
   const assetManager = editor?.AssetManager;
   if (!assetManager?.open) {
     const src = window.prompt("Image URL");
@@ -688,6 +688,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 || "") : "";
@@ -718,7 +725,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,
@@ -858,10 +866,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 +929,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 +963,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 +978,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);

package/dist/builder-v2/client.mjs

@@ -555,7 +555,7 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var chooseAsset = (editor, callback) => {
+var chooseAsset = (editor, currentSrc, callback) => {
   const assetManager = editor?.AssetManager;
   if (!assetManager?.open) {
     const src = window.prompt("Image URL");
@@ -564,6 +564,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 || "") : "";
@@ -594,7 +601,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,
@@ -734,10 +742,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 +805,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 +839,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 +854,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);

package/dist/index.mjs

@@ -1,25 +1,25 @@
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
 import {
   admin_exports
-} from "./chunk-KHK6RTGC.mjs";
+} from "./chunk-JC3UV74N.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.55",
   "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";