@sesionario/blocks 1.30.1 → 1.31.1

package/dist/index.cjs

@@ -1173,6 +1173,45 @@ function useZoomPanGestures(options = {}) {
     clearSnapBack
   };
 }
+function isBrokenImage(img) {
+  return img.complete && img.naturalWidth === 0;
+}
+function SafeImage({
+  src,
+  fallback,
+  alt = "",
+  onError,
+  ...imgProps
+}) {
+  const [failed, setFailed] = React7.useState(false);
+  const imgRef = React7.useRef(null);
+  const resolvedSrc = typeof src === "string" && src.length > 0 ? src : null;
+  React7.useLayoutEffect(() => {
+    setFailed(false);
+  }, [resolvedSrc]);
+  React7.useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (img && isBrokenImage(img)) {
+      setFailed(true);
+    }
+  }, [resolvedSrc, failed]);
+  if (!resolvedSrc || failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...imgProps,
+      ref: imgRef,
+      src: resolvedSrc,
+      alt,
+      onError: (event) => {
+        setFailed(true);
+        onError?.(event);
+      }
+    }
+  );
+}
 function ImageLightbox({
   images,
   index,
@@ -1296,7 +1335,7 @@ function ImageLightbox({
               onPointerUp: handlers.onPointerUp,
               onPointerCancel: handlers.onPointerCancel,
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+                SafeImage,
                 {
                   src: images[index],
                   alt: "",
@@ -1307,7 +1346,14 @@ function ImageLightbox({
                     transition,
                     cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
                   },
-                  onTransitionEnd: clearSnapBack
+                  onTransitionEnd: clearSnapBack,
+                  fallback: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "h-48 w-full max-w-md rounded-lg bg-muted"
+                    }
+                  )
                 }
               )
             }
@@ -1421,7 +1467,7 @@ function MediaCarousel({
           onPointerUp: handlers.onPointerUp,
           onPointerCancel: handlers.onPointerCancel,
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+            SafeImage,
             {
               src: item.src,
               alt: item.alt ?? "",
@@ -1432,7 +1478,14 @@ function MediaCarousel({
                 transition,
                 cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
               },
-              onTransitionEnd: clearSnapBack
+              onTransitionEnd: clearSnapBack,
+              fallback: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "h-48 w-full max-w-md rounded-lg bg-muted"
+                }
+              )
             }
           )
         }
@@ -2099,15 +2152,27 @@ function TenantAvatar({
 }) {
   const sizeClass = size === "sm" ? "size-6" : "size-8";
   const textClass = size === "sm" ? "text-xs" : "text-sm";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const initials = getInitials(name);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium",
+        "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium",
         sizeClass
       ),
-      style: logo ? void 0 : avatarFallbackStyle(name),
-      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: getInitials(name) })
+      style: avatarFallbackStyle(name),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: initials }),
+        logo ? /* @__PURE__ */ jsxRuntime.jsx(
+          SafeImage,
+          {
+            src: logo,
+            alt: "",
+            className: "absolute inset-0 size-full object-cover",
+            fallback: null
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -2627,28 +2692,26 @@ function MenuAvatar({
   sizeClass
 }) {
   const initials = getInitials(name);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: cn(
         "relative flex shrink-0 overflow-hidden rounded-full",
         sizeClass
       ),
-      children: image ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: image,
-          alt: "",
-          className: "aspect-square size-full object-cover"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "flex size-full items-center justify-center text-xs font-semibold",
-          style: avatarFallbackStyle(name),
-          children: initials
-        }
-      )
+      style: avatarFallbackStyle(name),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-full items-center justify-center text-xs font-semibold", children: initials }),
+        image ? /* @__PURE__ */ jsxRuntime.jsx(
+          SafeImage,
+          {
+            src: image,
+            alt: "",
+            className: "absolute inset-0 aspect-square size-full object-cover",
+            fallback: null
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -3740,30 +3803,31 @@ function AvatarEditorDialog({
           {
             className: "relative w-full h-full rounded-full overflow-hidden bg-muted border-2 border-border flex items-center justify-center",
             style: { width: displaySize, height: displaySize },
-            children: value ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SafeImage,
               {
-                src: value || "/placeholder.svg",
+                src: value,
                 alt: "Avatar",
-                className: "absolute -inset-px object-cover"
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex flex-col items-center justify-center text-muted-foreground",
-                  caption ? "gap-1" : "gap-0"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.User,
-                    {
-                      className: "h-1/2 w-1/2 max-h-[55%] max-w-[55%] shrink-0",
-                      "aria-hidden": true
-                    }
-                  ),
-                  caption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-center px-1", children: caption }) : null
-                ]
+                className: "absolute -inset-px object-cover",
+                fallback: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col items-center justify-center text-muted-foreground",
+                      caption ? "gap-1" : "gap-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.User,
+                        {
+                          className: "h-1/2 w-1/2 max-h-[55%] max-w-[55%] shrink-0",
+                          "aria-hidden": true
+                        }
+                      ),
+                      caption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-center px-1", children: caption }) : null
+                    ]
+                  }
+                )
               }
             )
           }
@@ -8829,15 +8893,16 @@ function ListPanel({
                 "span",
                 {
                   className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold text-white",
-                  style: item.avatarUrl ? void 0 : avatarFallbackStyle(item.title),
-                  children: item.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
+                  style: avatarFallbackStyle(item.title),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SafeImage,
                     {
                       src: item.avatarUrl,
                       alt: "",
-                      className: "size-full object-cover"
+                      className: "size-full object-cover",
+                      fallback: getInitials(item.title)
                     }
-                  ) : getInitials(item.title)
+                  )
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
@@ -9414,6 +9479,7 @@ exports.PaymentIcon = PaymentIcon;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
 exports.PlatformNavbar = PlatformNavbar;
+exports.SafeImage = SafeImage;
 exports.ScrollRestorationProvider = ScrollRestorationProvider;
 exports.SearchCommand = SearchCommand;
 exports.SearchablePicker = SearchablePicker;