@sesionario/blocks 1.41.0-rc.7 → 1.41.0-rc.9

package/dist/index.cjs

@@ -1174,31 +1174,54 @@ function useZoomPanGestures(options = {}) {
     clearSnapBack
   };
 }
+var STATIC_BLUR_FILTER = "blur(20px)";
 function isBrokenImage(img) {
   return img.complete && img.naturalWidth === 0;
 }
+function resolveBlurDataUrl(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
 function SafeImage({
   src,
   fallback,
   alt = "",
   onError,
+  onLoad,
+  blurDataUrl,
+  style,
   ...imgProps
 }) {
   const [failed, setFailed] = React2.useState(false);
+  const [loaded, setLoaded] = React2.useState(false);
   const imgRef = React2.useRef(null);
   const resolvedSrc = typeof src === "string" && src.length > 0 ? src : null;
+  const resolvedBlur = resolveBlurDataUrl(blurDataUrl);
   React2.useLayoutEffect(() => {
     setFailed(false);
+    setLoaded(false);
   }, [resolvedSrc]);
   React2.useLayoutEffect(() => {
     const img = imgRef.current;
-    if (img && isBrokenImage(img)) {
+    if (!img) return;
+    if (isBrokenImage(img)) {
       setFailed(true);
+      return;
     }
-  }, [resolvedSrc, failed]);
+    if (resolvedBlur && img.complete && img.naturalWidth > 0) {
+      setLoaded(true);
+    }
+  }, [resolvedSrc, failed, resolvedBlur]);
   if (!resolvedSrc || failed) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
   }
+  const paintedStyle = resolvedBlur === null ? style : {
+    ...style,
+    backgroundImage: `url(${JSON.stringify(resolvedBlur)})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    ...loaded || prefersReducedMotion() ? {} : { filter: STATIC_BLUR_FILTER }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -1206,6 +1229,11 @@ function SafeImage({
       ref: imgRef,
       src: resolvedSrc,
       alt,
+      style: paintedStyle,
+      onLoad: (event) => {
+        if (resolvedBlur) setLoaded(true);
+        onLoad?.(event);
+      },
       onError: (event) => {
         setFailed(true);
         onError?.(event);
@@ -1215,6 +1243,7 @@ function SafeImage({
 }
 function ImageLightbox({
   images,
+  blurDataUrls,
   index,
   onIndexChange,
   onClose,
@@ -1340,6 +1369,7 @@ function ImageLightbox({
                 {
                   src: images[index],
                   alt: "",
+                  blurDataUrl: blurDataUrls?.[index] ?? null,
                   draggable: false,
                   className: "max-h-[calc(100dvh-2rem)] max-w-full select-none rounded-lg object-contain",
                   style: {
@@ -1472,6 +1502,7 @@ function MediaCarousel({
             {
               src: item.src,
               alt: item.alt ?? "",
+              blurDataUrl: item.blurDataUrl,
               draggable: false,
               className: "max-h-full max-w-full select-none object-contain",
               style: {
@@ -1707,6 +1738,79 @@ function MediaViewerDialog({
     }
   ) });
 }
+
+// src/components/media/blurDataUrl.ts
+var BLUR_LONG_EDGE_PX = 16;
+var BLUR_DATA_URL_MAX_CHARS = 1024;
+var JPEG_DATA_URL_PREFIX = "data:image/jpeg;base64,";
+var JPEG_QUALITIES = [0.7, 0.5, 0.35, 0.2];
+function longEdgeSteps(start) {
+  const steps = [];
+  let edge = start;
+  while (edge >= 2) {
+    steps.push(edge);
+    edge = Math.floor(edge / 2);
+  }
+  return steps;
+}
+function sizeForLongEdge(width, height, longEdge) {
+  const longest = Math.max(width, height);
+  const scale = longEdge / longest;
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale))
+  };
+}
+function acceptableBlurDataUrl(value) {
+  return value.startsWith(JPEG_DATA_URL_PREFIX) && value.length > JPEG_DATA_URL_PREFIX.length && value.length <= BLUR_DATA_URL_MAX_CHARS;
+}
+async function decodeBlob(blob) {
+  if (typeof createImageBitmap !== "function") {
+    throw new Error("createImageBitmap unavailable");
+  }
+  const bitmap = await createImageBitmap(blob);
+  return {
+    source: bitmap,
+    width: bitmap.width,
+    height: bitmap.height,
+    release() {
+      bitmap.close();
+    }
+  };
+}
+async function blurDataUrlFromBlob(blob) {
+  if (typeof document === "undefined") return null;
+  let decoded;
+  try {
+    decoded = await decodeBlob(blob);
+  } catch {
+    return null;
+  }
+  try {
+    if (Math.min(decoded.width, decoded.height) <= 0) return null;
+    const canvas = document.createElement("canvas");
+    for (const edge of longEdgeSteps(BLUR_LONG_EDGE_PX)) {
+      const size = sizeForLongEdge(decoded.width, decoded.height, edge);
+      canvas.width = size.width;
+      canvas.height = size.height;
+      const context = canvas.getContext("2d");
+      if (!context) return null;
+      context.drawImage(decoded.source, 0, 0, size.width, size.height);
+      for (const quality of JPEG_QUALITIES) {
+        let url;
+        try {
+          url = canvas.toDataURL("image/jpeg", quality);
+        } catch {
+          return null;
+        }
+        if (acceptableBlurDataUrl(url)) return url;
+      }
+    }
+    return null;
+  } finally {
+    decoded.release();
+  }
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -9104,6 +9208,7 @@ exports.ZOOM_PAN_MIN_SCALE = ZOOM_PAN_MIN_SCALE;
 exports.ZOOM_PAN_SWIPE_COMMIT_PX = ZOOM_PAN_SWIPE_COMMIT_PX;
 exports.ZOOM_PAN_SWIPE_SNAP_MS = ZOOM_PAN_SWIPE_SNAP_MS;
 exports.avatarFallbackStyle = avatarFallbackStyle;
+exports.blurDataUrlFromBlob = blurDataUrlFromBlob;
 exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
 exports.createSupportChatClient = createSupportChatClient;