@sesionario/blocks 1.41.0-rc.6 → 1.41.0-rc.8

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;
+    }
+    if (resolvedBlur && img.complete && img.naturalWidth > 0) {
+      setLoaded(true);
     }
-  }, [resolvedSrc, failed]);
+  }, [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,
@@ -5618,6 +5722,7 @@ function matchesQuery(entry, query, getOptionKeywords) {
 function SearchablePicker(props) {
   const {
     options,
+    selectedItems: selectedItemsProp,
     fetchOptions,
     getOptionValue,
     getOptionLabel,
@@ -5676,11 +5781,16 @@ function SearchablePicker(props) {
     },
     [getOptionValue]
   );
+  if (options?.length) rememberItems(options);
+  if (selectedItemsProp?.length) rememberItems(selectedItemsProp);
+  if (pinned?.recommended?.length) rememberItems(pinned.recommended);
+  if (pinned?.recent?.length) rememberItems(pinned.recent);
   React2.useEffect(() => {
     if (options) rememberItems(options);
+    if (selectedItemsProp) rememberItems(selectedItemsProp);
     if (pinned?.recommended) rememberItems(pinned.recommended);
     if (pinned?.recent) rememberItems(pinned.recent);
-  }, [options, pinned, rememberItems]);
+  }, [options, selectedItemsProp, pinned, rememberItems]);
   React2.useEffect(() => {
     if (!open) {
       setQuery("");
@@ -5728,7 +5838,7 @@ function SearchablePicker(props) {
   const selectedItems = React2.useMemo(() => {
     const values = mode === "multiple" ? selectedValueKey ? selectedValueKey.split("\0") : [] : selectedValueKey ? [selectedValueKey] : [];
     return values.map((value) => knownItemsRef.current.get(value)).filter((item) => item !== void 0);
-  }, [mode, selectedValueKey, options, pinned, remoteItems]);
+  }, [mode, selectedValueKey, options, selectedItemsProp, pinned, remoteItems]);
   const queryForFilter = query.trim();
   const recommended = React2.useMemo(() => {
     if (queryForFilter) return [];
@@ -5832,13 +5942,27 @@ function SearchablePicker(props) {
   );
   const handleLoadMore = React2.useCallback(async () => {
     if (!onLoadMore || isLoadingMore) return;
+    const requestId = requestIdRef.current;
     setIsLoadingMore(true);
     try {
-      await onLoadMore();
+      const more = await onLoadMore();
+      if (requestIdRef.current !== requestId || !Array.isArray(more)) return;
+      setRemoteItems((prev) => {
+        const seen = new Set(prev.map((item) => getOptionValue(item)));
+        const next = [...prev];
+        for (const item of more) {
+          const value = getOptionValue(item);
+          if (seen.has(value)) continue;
+          seen.add(value);
+          next.push(item);
+        }
+        return next;
+      });
+      rememberItems(more);
     } finally {
-      setIsLoadingMore(false);
+      if (requestIdRef.current === requestId) setIsLoadingMore(false);
     }
-  }, [onLoadMore, isLoadingMore]);
+  }, [onLoadMore, isLoadingMore, getOptionValue, rememberItems]);
   const triggerLabel = React2.useMemo(() => {
     if (renderValue) {
       if (mode === "multiple") {
@@ -5972,7 +6096,7 @@ function SearchablePicker(props) {
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full items-center gap-1", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverContent,
@@ -9084,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;