@amplifyup/sdk 0.1.60 → 0.1.61

package/dist/react.mjs

@@ -3740,6 +3740,20 @@ function canInlineEditRichText(name, value) {
   }
   return true;
 }
+function isLikelyImagePropName(name) {
+  const n = name.toLowerCase();
+  return n.includes("image") || n.includes("thumbnail") || n.includes("photo") || n.includes("avatar") || n.includes("poster") || n.includes("logo") || n.endsWith("img") || n.endsWith("_src") || n.endsWith("Src");
+}
+function portableImageUrl(value) {
+  if (typeof value === "string") return value.trim();
+  if (value && typeof value === "object" && !Array.isArray(value) && "url" in value) {
+    const url = value.url;
+    if (url == null) return "";
+    if (typeof url === "string") return url.trim();
+    return null;
+  }
+  return null;
+}
 function inferEditName(explicitName, contextProps, sourceValue) {
   if (explicitName) return explicitName;
   if (!contextProps) return "";
@@ -3747,6 +3761,22 @@ function inferEditName(explicitName, contextProps, sourceValue) {
     (key) => Object.is(contextProps[key], sourceValue)
   );
   if (keys.length === 1) return keys[0];
+  const srcUrl = portableImageUrl(sourceValue);
+  if (srcUrl !== null) {
+    const byUrl = Object.keys(contextProps).filter((key) => {
+      const other = portableImageUrl(contextProps[key]);
+      return other !== null && other === srcUrl;
+    });
+    if (byUrl.length === 1) return byUrl[0];
+    if (srcUrl === "") {
+      const emptyImageKeys = Object.keys(contextProps).filter((key) => {
+        if (!isLikelyImagePropName(key)) return false;
+        const other = portableImageUrl(contextProps[key]);
+        return other === "" || contextProps[key] == null;
+      });
+      if (emptyImageKeys.length === 1) return emptyImageKeys[0];
+    }
+  }
   if (keys.length === 0 || isComposerEmptyText(sourceValue)) return "";
   return keys[0];
 }
@@ -4276,6 +4306,11 @@ function Image(props) {
     "data-amplifyup-field-type": "image",
     "data-amplifyup-node-id": context?.layoutNodeId || void 0
   } : null;
+  if (composerEdit && !editName && (hasExplicitValue || name)) {
+    console.warn(
+      '[AmplifyUp SDK] Image could not infer a Composer field name from value={\u2026}. Pass name="yourProp" (same as the component prop) so the image can be selected.'
+    );
+  }
   if (!src) {
     if (!composerEdit || !fieldAttrs) return null;
     return /* @__PURE__ */ jsx(
@@ -4286,14 +4321,16 @@ function Image(props) {
         role: "img",
         "aria-label": alt || editName || "Image",
         style: {
-          display: "inline-block",
-          minWidth: width ? void 0 : 48,
-          minHeight: height ? void 0 : 48,
-          width: width || void 0,
+          display: "block",
+          boxSizing: "border-box",
+          minWidth: width ? void 0 : 120,
+          minHeight: height ? void 0 : 80,
+          width: width || "100%",
           height: height || void 0,
           background: "color-mix(in srgb, currentColor 8%, transparent)",
-          outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-          outlineOffset: 2
+          outline: "2px dashed hsl(82 100% 45%)",
+          outlineOffset: 2,
+          cursor: "pointer"
         }
       }
     );
@@ -4307,7 +4344,11 @@ function Image(props) {
       alt,
       className,
       width,
-      height
+      height,
+      style: {
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
+      }
     }
   );
 }