@sesionario/blocks 1.31.0 → 1.31.2

package/dist/index.js

@@ -1142,6 +1142,9 @@ function useZoomPanGestures(options = {}) {
     clearSnapBack
   };
 }
+function isBrokenImage(img) {
+  return img.complete && img.naturalWidth === 0;
+}
 function SafeImage({
   src,
   fallback,
@@ -1150,10 +1153,17 @@ function SafeImage({
   ...imgProps
 }) {
   const [failed, setFailed] = useState(false);
+  const imgRef = useRef(null);
   const resolvedSrc = typeof src === "string" && src.length > 0 ? src : null;
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFailed(false);
   }, [resolvedSrc]);
+  useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (img && isBrokenImage(img)) {
+      setFailed(true);
+    }
+  }, [resolvedSrc, failed]);
   if (!resolvedSrc || failed) {
     return /* @__PURE__ */ jsx(Fragment, { children: fallback });
   }
@@ -1161,6 +1171,7 @@ function SafeImage({
     "img",
     {
       ...imgProps,
+      ref: imgRef,
       src: resolvedSrc,
       alt,
       onError: (event) => {
@@ -1640,7 +1651,9 @@ function MediaViewerDialog({
     {
       showCloseButton: false,
       className: cn(
-        "inset-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
+        // flex-col is required: without it the single child is a row item
+        // sized to max-content (toolbar width) and the viewport collapses.
+        "inset-0 flex flex-col h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
         contentClassName,
         className
       ),
@@ -2110,23 +2123,27 @@ function TenantAvatar({
 }) {
   const sizeClass = size === "sm" ? "size-6" : "size-8";
   const textClass = size === "sm" ? "text-xs" : "text-sm";
-  return /* @__PURE__ */ jsx(
+  const initials = getInitials(name);
+  return /* @__PURE__ */ 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: avatarFallbackStyle(name),
-      children: /* @__PURE__ */ jsx(
-        SafeImage,
-        {
-          src: logo,
-          alt: "",
-          className: "size-full object-cover",
-          fallback: /* @__PURE__ */ jsx("span", { className: textClass, children: getInitials(name) })
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx("span", { className: textClass, children: initials }),
+        logo ? /* @__PURE__ */ jsx(
+          SafeImage,
+          {
+            src: logo,
+            alt: "",
+            className: "absolute inset-0 size-full object-cover",
+            fallback: null
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -2646,30 +2663,26 @@ function MenuAvatar({
   sizeClass
 }) {
   const initials = getInitials(name);
-  const initialsFallback = /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "flex size-full items-center justify-center text-xs font-semibold",
-      style: avatarFallbackStyle(name),
-      children: initials
-    }
-  );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
         "relative flex shrink-0 overflow-hidden rounded-full",
         sizeClass
       ),
-      children: /* @__PURE__ */ jsx(
-        SafeImage,
-        {
-          src: image,
-          alt: "",
-          className: "aspect-square size-full object-cover",
-          fallback: initialsFallback
-        }
-      )
+      style: avatarFallbackStyle(name),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-full items-center justify-center text-xs font-semibold", children: initials }),
+        image ? /* @__PURE__ */ jsx(
+          SafeImage,
+          {
+            src: image,
+            alt: "",
+            className: "absolute inset-0 aspect-square size-full object-cover",
+            fallback: null
+          }
+        ) : null
+      ]
     }
   );
 }