@page-speed/img 0.4.3 → 0.4.6

package/dist/core/Img.js

@@ -1,23 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { useOptimizedImage } from '@page-speed/hooks';
-import { DEFAULT_CDN_HOST, buildPlaceholderImageUrl, fetchImageData, imageVariantsHaveRenderableSource, } from '../utils/api.js';
-import { useMediaSelectionEffect } from './useMediaSelectionEffect.js';
-import { useResponsiveReset } from './useResponsiveReset.js';
-const DEFAULT_WIDTHS = {
-    sm: 640,
-    md: 1024,
-    lg: 1536,
-    full: 2560,
-};
-const MAX_VARIANT_REFRESH_ATTEMPTS = 5;
-const VARIANT_REFRESH_DELAY_MS = 3000;
-const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+import { forwardRef, memo, useCallback, useMemo, useRef } from "react";
+import { useOptimizedImage } from "@page-speed/hooks/media";
+import { useImgDebugLog } from "./useImgDebugLog.js";
+import { useMediaSelectionEffect } from "./useMediaSelectionEffect.js";
+import { useResponsiveReset } from "./useResponsiveReset.js";
+const TRANSPARENT_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 let defaultOptixFlowConfig;
-const deprecatedMediaWarnings = new Set();
 const readGlobalOptixFlowConfig = () => {
-    if (typeof globalThis === 'undefined')
+    if (typeof globalThis === "undefined")
         return undefined;
     const globalAny = globalThis;
     return (globalAny.PageSpeedImgDefaults?.optixFlowConfig ||
@@ -30,24 +21,12 @@ const resolveOptixFlowConfig = (config) => {
 export const setDefaultOptixFlowConfig = (config) => {
     defaultOptixFlowConfig = config ?? undefined;
 };
-const warnDeprecatedMediaId = (mediaId) => {
-    if (!Number.isFinite(mediaId) || mediaId == null)
-        return;
-    const id = mediaId;
-    if (deprecatedMediaWarnings.has(id))
-        return;
-    deprecatedMediaWarnings.add(id);
-    if (typeof console !== 'undefined' && console.warn) {
-        console.warn('[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.', { mediaId: id });
-    }
-};
-const isUrlString = (value) => typeof value === 'string' && value.trim().length > 0;
 const parseDimension = (value) => {
-    if (value === '' || value === null || typeof value === 'undefined')
+    if (value === "" || value === null || typeof value === "undefined")
         return undefined;
-    if (typeof value === 'number' && Number.isFinite(value))
+    if (typeof value === "number" && Number.isFinite(value))
         return value;
-    if (typeof value === 'string') {
+    if (typeof value === "string") {
         const numeric = Number(value);
         if (Number.isFinite(numeric))
             return numeric;
@@ -58,294 +37,94 @@ const composeRefs = (hookRef, forwardedRef, localRef) => useCallback((node) => {
     hookRef(node);
     // eslint-disable-next-line no-param-reassign
     localRef.current = node;
-    if (typeof forwardedRef === 'function') {
+    if (typeof forwardedRef === "function") {
         forwardedRef(node);
     }
-    else if (forwardedRef && typeof forwardedRef === 'object') {
+    else if (forwardedRef && typeof forwardedRef === "object") {
         forwardedRef.current = node;
     }
 }, [hookRef, forwardedRef, localRef]);
-function widthMapFromMetadata(v) {
-    const w = v?.widths;
-    if (!w)
-        return null;
-    return {
-        sm: w.small ?? w.sm ?? DEFAULT_WIDTHS.sm,
-        md: w.medium ?? w.md ?? DEFAULT_WIDTHS.md,
-        lg: w.large ?? w.lg ?? DEFAULT_WIDTHS.lg,
-        full: w.full_size ?? w.full ?? DEFAULT_WIDTHS.full,
-    };
-}
-function pickBest(sizes) {
-    if (!sizes)
-        return undefined;
-    return sizes.md || sizes.lg || sizes.sm || sizes.full || Object.values(sizes).find(Boolean);
-}
-const DEFAULT_SIZES = '(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px';
-const ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, intersectionMargin, intersectionThreshold, optixFlowConfig, forwardedRef, ...rest }) => {
+const ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, width, height, fetchPriority, intersectionMargin, intersectionThreshold, optixFlowConfig, useDebugMode, forwardedRef, ...restProps }) => {
     const imgRef = useRef(null);
     const pictureRef = useRef(null);
     useResponsiveReset(pictureRef);
     useMediaSelectionEffect();
-    const normalizedSrc = useMemo(() => (typeof directSrc === 'string' ? directSrc.trim() : ''), [directSrc]);
-    const numericWidth = useMemo(() => parseDimension(rest.width), [rest]);
-    const numericHeight = useMemo(() => parseDimension(rest.height), [rest]);
+    const normalizedSrc = useMemo(() => (typeof directSrc === "string" ? directSrc.trim() : ""), [directSrc]);
+    const numericWidth = useMemo(() => parseDimension(width), [width]);
+    const numericHeight = useMemo(() => parseDimension(height), [height]);
     const resolvedOptixConfig = useMemo(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);
-    const eagerLoad = eager ?? loading === 'eager';
-    const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({
+    const eagerLoad = useMemo(() => {
+        return eager ?? loading === "eager";
+    }, [eager, loading]);
+    const hookOptions = useMemo(() => ({
         src: normalizedSrc,
         eager: eagerLoad,
         width: numericWidth,
         height: numericHeight,
-        rootMargin: intersectionMargin ?? '200px',
+        rootMargin: intersectionMargin ?? "200px",
         threshold: intersectionThreshold ?? 0.1,
         optixFlowConfig: resolvedOptixConfig,
-    });
+    }), [
+        normalizedSrc,
+        eagerLoad,
+        numericWidth,
+        numericHeight,
+        intersectionMargin,
+        intersectionThreshold,
+        resolvedOptixConfig,
+    ]);
+    const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, isInView, size, } = useOptimizedImage(hookOptions);
     const mergedRef = composeRefs(hookRef, forwardedRef, imgRef);
-    const { width, height, ...restProps } = rest;
-    const sizesAttr = sizes ?? (computedSizes || undefined);
-    const loadingAttr = loading ?? hookLoading ?? 'lazy';
-    const decodingAttr = decoding ?? 'async';
-    const hasSrcSet = Boolean(srcset.avif || srcset.webp || srcset.jpeg);
-    const imgSrc = src || normalizedSrc || TRANSPARENT_PIXEL;
-    const inlineSrcSet = hasSrcSet && !srcset.avif && !srcset.webp ? srcset.jpeg : '';
-    const parsedWidth = parseDimension(width);
-    const parsedHeight = parseDimension(height);
-    const widthAttr = parsedWidth ?? (size.width || numericWidth || undefined);
-    const heightAttr = parsedHeight ?? (size.height || numericHeight || undefined);
+    const sizesAttr = useMemo(() => {
+        return sizes ?? (computedSizes || undefined);
+    }, [sizes, computedSizes]);
+    const loadingAttr = useMemo(() => {
+        return loading ?? hookLoading ?? "lazy";
+    }, [loading, hookLoading]);
+    const decodingAttr = useMemo(() => {
+        return decoding ?? "async";
+    }, [decoding]);
+    const fetchPriorityAttr = useMemo(() => {
+        return fetchPriority ?? (eagerLoad ? "high" : undefined);
+    }, [fetchPriority, eagerLoad]);
+    const hasSrcSet = useMemo(() => {
+        return Boolean(srcset.avif || srcset.webp || srcset.jpeg);
+    }, [srcset.avif, srcset.webp, srcset.jpeg]);
+    const imgSrc = useMemo(() => {
+        return src || normalizedSrc || TRANSPARENT_PIXEL;
+    }, [src, normalizedSrc]);
+    const inlineSrcSet = useMemo(() => {
+        return hasSrcSet && !srcset.avif && !srcset.webp ? srcset.jpeg : "";
+    }, [hasSrcSet, srcset.avif, srcset.webp, srcset.jpeg]);
+    const widthAttr = useMemo(() => {
+        return numericWidth ?? (size.width || undefined);
+    }, [numericWidth, size?.width]);
+    const heightAttr = useMemo(() => {
+        return numericHeight ?? (size.height || undefined);
+    }, [numericHeight, size?.height]);
+    useImgDebugLog({
+        enabled: useDebugMode ?? false,
+        eagerLoad,
+        isInView,
+        imgSrc,
+        transparentPixel: TRANSPARENT_PIXEL,
+        srcset,
+        sizesAttr,
+    });
     if (!hasSrcSet) {
-        return (_jsx("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, alt: alt, title: title, width: widthAttr, height: heightAttr, ...restProps }));
+        return (_jsx("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, fetchPriority: fetchPriorityAttr, alt: alt, title: title, width: widthAttr, height: heightAttr, ...restProps }));
     }
-    return (_jsxs("picture", { ref: pictureRef, children: [srcset.avif ? _jsx("source", { type: "image/avif", srcSet: srcset.avif, sizes: sizesAttr }) : null, srcset.webp ? _jsx("source", { type: "image/webp", srcSet: srcset.webp, sizes: sizesAttr }) : null, _jsx("img", { ref: mergedRef, src: imgSrc, srcSet: inlineSrcSet || undefined, sizes: inlineSrcSet ? sizesAttr : undefined, loading: loadingAttr, decoding: decodingAttr, alt: alt, title: title, width: widthAttr, height: heightAttr, ...restProps })] }));
-};
-const LegacyImg = ({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, forwardedRef, ...rest }) => {
-    const imgRef = useRef(null);
-    const pictureRef = useRef(null);
-    useImperativeHandle(forwardedRef, () => imgRef.current);
-    useResponsiveReset(pictureRef);
-    useMediaSelectionEffect();
-    const [data, setData] = useState(null);
-    const [retryCount, setRetryCount] = useState(0);
-    const hasMediaId = Number.isFinite(mediaId);
-    const loadingAttr = loading ?? 'lazy';
-    const decodingAttr = decoding ?? 'async';
-    const [isInView, setIsInView] = useState(() => !hasMediaId || loadingAttr !== 'lazy');
-    const cdnOrigin = useMemo(() => (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, ''), [cdnHost]);
-    useEffect(() => {
-        if (!hasMediaId) {
-            setData(null);
-            setRetryCount(0);
-            return;
-        }
-        setData(null);
-        setRetryCount(0);
-    }, [hasMediaId, mediaId, cdnHost]);
-    useEffect(() => {
-        if (!hasMediaId) {
-            return;
-        }
-        const controller = new AbortController();
-        fetchImageData(mediaId, {
-            cdnHost,
-            signal: controller.signal,
-            bypassCache: retryCount > 0,
-        })
-            .then((d) => {
-            setData(d);
-            onImageData?.(d);
-        })
-            .catch((err) => {
-            if (err?.name !== 'AbortError') {
-                // eslint-disable-next-line no-console
-                console.warn('Image data fetch failed:', err);
-            }
-        });
-        return () => controller.abort();
-    }, [hasMediaId, mediaId, cdnHost, onImageData, retryCount]);
-    useEffect(() => {
-        if (!hasMediaId || loadingAttr !== 'lazy') {
-            setIsInView(true);
-            return;
-        }
-        setIsInView(false);
-    }, [hasMediaId, mediaId, loadingAttr]);
-    useEffect(() => {
-        if (!hasMediaId || loadingAttr !== 'lazy' || isInView) {
-            return;
-        }
-        if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {
-            setIsInView(true);
-            return;
-        }
-        const node = imgRef.current;
-        if (!node) {
-            return;
-        }
-        const observer = new IntersectionObserver((entries) => {
-            if (entries.some((entry) => entry.isIntersecting)) {
-                setIsInView(true);
-                observer.disconnect();
-            }
-        }, { rootMargin: '200px' });
-        observer.observe(node);
-        return () => observer.disconnect();
-    }, [hasMediaId, loadingAttr, isInView]);
-    // Build picture/source/srcset from variants
-    const picture = useMemo(() => {
-        if (!data)
-            return null;
-        const v = data.variants_data?.variants ?? {};
-        const webp = v.WEBP;
-        const avif = v.AVIF;
-        const jpeg = v.JPEG;
-        const widths = widthMapFromMetadata(v.WEBP?.metadata) ||
-            widthMapFromMetadata(v.JPEG?.metadata) ||
-            { ...DEFAULT_WIDTHS };
-        const ensureAbsolute = (url) => {
-            if (!isUrlString(url))
-                return undefined;
-            if (/^https?:\/\//i.test(url) || url.startsWith('data:'))
-                return url;
-            if (url.startsWith('//'))
-                return `https:${url}`;
-            if (url.startsWith('/'))
-                return `${cdnOrigin}${url}`;
-            return `${cdnOrigin}/${url}`;
-        };
-        const normalizeCandidate = (candidate) => ensureAbsolute(typeof candidate === 'string' ? candidate : undefined);
-        const variantCandidates = [
-            pickBest(webp),
-            pickBest(jpeg),
-            pickBest(avif),
-            webp?.sm,
-            webp?.md,
-            webp?.lg,
-            webp?.full,
-            jpeg?.sm,
-            jpeg?.md,
-            jpeg?.lg,
-            jpeg?.full,
-            avif?.sm,
-            avif?.md,
-            avif?.lg,
-            avif?.full,
-        ]
-            .map((candidate) => normalizeCandidate(candidate ?? undefined))
-            .filter(isUrlString);
-        const raw = data;
-        const directCandidates = [
-            raw.img_url,
-            raw.file_data_url,
-            raw.file_data_thumbnail_url,
-            raw.img_src,
-            raw.med_src,
-            raw.thumb_src,
-            raw.low_res_thumb,
-        ]
-            .map((candidate) => (isUrlString(candidate) ? normalizeCandidate(candidate) : undefined))
-            .filter(isUrlString);
-        // Add fallback_url as the final option if no variants or direct candidates
-        const fallbackCandidates = raw.fallback_url ? [normalizeCandidate(raw.fallback_url)].filter(isUrlString) : [];
-        const fallback = [...variantCandidates, ...directCandidates, ...fallbackCandidates][0];
-        if (!fallback) {
-            return null;
-        }
-        const toSrcSet = (sizes) => {
-            if (!sizes)
-                return undefined;
-            const entries = [];
-            const push = (url, width) => {
-                const absolute = normalizeCandidate(url);
-                if (absolute && width)
-                    entries.push(`${absolute} ${width}w`);
-            };
-            push(sizes.sm, widths.sm);
-            push(sizes.md, widths.md);
-            push(sizes.lg, widths.lg);
-            push(sizes.full, widths.full);
-            return entries.length ? entries.join(', ') : undefined;
-        };
-        return { webp, avif, jpeg, toSrcSet, fallback, widths, hasVariantSource: variantCandidates.length > 0 };
-    }, [data, cdnOrigin]);
-    const hasVariantEntries = useMemo(() => imageVariantsHaveRenderableSource(data?.variants_data?.variants ?? null), [data]);
-    const variantsStatus = useMemo(() => {
-        const status = (data?.variants_data?.status ?? data?.variants_status) ?? '';
-        return typeof status === 'string' ? status.toLowerCase() : '';
-    }, [data]);
-    const variantsFailed = variantsStatus === 'failed' || variantsStatus === 'error';
-    const shouldPollForVariants = hasMediaId && Boolean(data) && !variantsFailed && !hasVariantEntries && retryCount < MAX_VARIANT_REFRESH_ATTEMPTS;
-    useEffect(() => {
-        if (!shouldPollForVariants) {
-            return;
-        }
-        if (typeof window === 'undefined') {
-            return;
-        }
-        const timeoutId = window.setTimeout(() => {
-            setRetryCount((count) => count + 1);
-        }, VARIANT_REFRESH_DELAY_MS);
-        return () => window.clearTimeout(timeoutId);
-    }, [shouldPollForVariants]);
-    // Map HTML attributes from content manifest and sizing
-    const altAttr = useMemo(() => {
-        if (typeof alt === 'string')
-            return alt;
-        return data?.meta?.content_manifest?.summary ?? undefined;
-    }, [alt, data]);
-    const titleAttr = useMemo(() => {
-        if (typeof title === 'string')
-            return title;
-        return data?.meta?.content_manifest?.title ?? undefined;
-    }, [title, data]);
-    const widthAttr = useMemo(() => data?.meta?.sizing?.width ?? data?.variants_data?.metadata?.width ?? undefined, [data]);
-    const heightAttr = useMemo(() => data?.meta?.sizing?.height ?? data?.variants_data?.metadata?.height ?? undefined, [data]);
-    // Compute data-filename for consumers that need semantic filenames
-    const dataFilename = useMemo(() => {
-        const base = data?.meta?.content_manifest?.optimized_filename;
-        if (!base)
-            return undefined;
-        // ext derived from chosen fallback url
-        const href = picture?.fallback;
-        if (!href)
-            return undefined;
-        const dot = href.lastIndexOf('.');
-        const ext = dot > -1 ? href.slice(dot + 1).toLowerCase() : 'jpg';
-        return `${base}.${ext}`;
-    }, [data, picture]);
-    // If mediaId not provided but src is, render plain img
-    if (!hasMediaId) {
-        const r = { ...rest };
-        return (_jsx("img", { ref: imgRef, src: directSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width, height: r.height, ...r }));
-    }
-    const placeholderSrc = buildPlaceholderImageUrl(mediaId, cdnHost);
-    if (!data || !picture || !isInView) {
-        const r = { ...rest };
-        return (_jsx("img", { ref: imgRef, src: placeholderSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width ?? widthAttr, height: r.height ?? heightAttr, ...r }));
-    }
-    const sizesAttr = sizes ?? DEFAULT_SIZES;
-    const { webp, avif, jpeg, toSrcSet, fallback } = picture;
-    const webpSet = toSrcSet(webp);
-    const avifSet = toSrcSet(avif);
-    const jpegSet = toSrcSet(jpeg);
-    if (webpSet || avifSet || jpegSet) {
-        return (_jsxs("picture", { children: [avifSet ? _jsx("source", { type: "image/avif", srcSet: avifSet, sizes: sizesAttr }) : null, webpSet ? _jsx("source", { type: "image/webp", srcSet: webpSet, sizes: sizesAttr }) : null, _jsx("img", { ref: imgRef, src: fallback, srcSet: jpegSet && !webpSet && !avifSet ? jpegSet : undefined, sizes: jpegSet && !webpSet && !avifSet ? sizesAttr : undefined, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest })] }));
-    }
-    return (_jsx("img", { ref: imgRef, src: fallback, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest }));
+    return (_jsxs("picture", { ref: pictureRef, children: [srcset.avif ? (_jsx("source", { type: "image/avif", srcSet: srcset.avif, sizes: sizesAttr })) : null, srcset.webp ? (_jsx("source", { type: "image/webp", srcSet: srcset.webp, sizes: sizesAttr })) : null, _jsx("img", { ref: mergedRef, src: imgSrc, srcSet: inlineSrcSet || undefined, sizes: inlineSrcSet ? sizesAttr : undefined, loading: loadingAttr, decoding: decodingAttr, fetchPriority: fetchPriorityAttr, alt: alt, title: title, width: widthAttr, height: heightAttr, ...restProps })] }));
 };
 const ImgBase = forwardRef(function Img(props, ref) {
-    const hasMediaId = Number.isFinite(props.mediaId);
-    if (hasMediaId) {
-        warnDeprecatedMediaId(props.mediaId);
-        return _jsx(LegacyImg, { ...props, forwardedRef: ref });
-    }
-    const hasSrc = typeof props.src === 'string' && props.src.trim().length > 0;
+    const hasSrc = typeof props.src === "string" && props.src.trim().length > 0;
     if (!hasSrc) {
-        if (typeof console !== 'undefined' && console.warn) {
-            console.warn('<Img /> requires either src or mediaId. No src provided, rendering null.');
+        if (typeof console !== "undefined" && console.warn) {
+            console.warn("<Img /> requires src. No src provided, rendering null.");
         }
         return null;
     }
     return _jsx(ModernImg, { ...props, forwardedRef: ref });
 });
 export const Img = memo(ImgBase);
-Img.displayName = 'PageSpeedImg';
+Img.displayName = "PageSpeedImg";

package/dist/core/useImgDebugLog.cjs

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+/**
+ * Logs image-request details to the console when `enabled` is true.
+ * When disabled (the default), the hook short-circuits on the very first
+ * line so there is no meaningful runtime cost.
+ */
+export function useImgDebugLog({ enabled, eagerLoad, isInView, imgSrc, transparentPixel, srcset, sizesAttr, }) {
+    const logKeyRef = useRef(null);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (typeof window === "undefined")
+            return;
+        if (!eagerLoad && !isInView)
+            return;
+        if (!imgSrc || imgSrc === transparentPixel)
+            return;
+        const logKey = [
+            imgSrc,
+            srcset.avif,
+            srcset.webp,
+            srcset.jpeg,
+            sizesAttr ?? "",
+        ].join("|");
+        if (logKeyRef.current === logKey)
+            return;
+        logKeyRef.current = logKey;
+        if (typeof console !== "undefined" && console.info) {
+            console.info("[PageSpeedImg] image request", {
+                src: imgSrc,
+                srcset,
+                sizes: sizesAttr,
+            });
+        }
+    }, [
+        enabled,
+        eagerLoad,
+        imgSrc,
+        isInView,
+        sizesAttr,
+        srcset.avif,
+        srcset.webp,
+        srcset.jpeg,
+        transparentPixel,
+    ]);
+}

package/dist/core/useImgDebugLog.d.ts

@@ -0,0 +1,20 @@
+interface ImgDebugLogParams {
+    enabled: boolean;
+    eagerLoad: boolean;
+    isInView: boolean;
+    imgSrc: string;
+    transparentPixel: string;
+    srcset: {
+        avif: string;
+        webp: string;
+        jpeg: string;
+    };
+    sizesAttr: string | undefined;
+}
+/**
+ * Logs image-request details to the console when `enabled` is true.
+ * When disabled (the default), the hook short-circuits on the very first
+ * line so there is no meaningful runtime cost.
+ */
+export declare function useImgDebugLog({ enabled, eagerLoad, isInView, imgSrc, transparentPixel, srcset, sizesAttr, }: ImgDebugLogParams): void;
+export {};

package/dist/core/useImgDebugLog.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+/**
+ * Logs image-request details to the console when `enabled` is true.
+ * When disabled (the default), the hook short-circuits on the very first
+ * line so there is no meaningful runtime cost.
+ */
+export function useImgDebugLog({ enabled, eagerLoad, isInView, imgSrc, transparentPixel, srcset, sizesAttr, }) {
+    const logKeyRef = useRef(null);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (typeof window === "undefined")
+            return;
+        if (!eagerLoad && !isInView)
+            return;
+        if (!imgSrc || imgSrc === transparentPixel)
+            return;
+        const logKey = [
+            imgSrc,
+            srcset.avif,
+            srcset.webp,
+            srcset.jpeg,
+            sizesAttr ?? "",
+        ].join("|");
+        if (logKeyRef.current === logKey)
+            return;
+        logKeyRef.current = logKey;
+        if (typeof console !== "undefined" && console.info) {
+            console.info("[PageSpeedImg] image request", {
+                src: imgSrc,
+                srcset,
+                sizes: sizesAttr,
+            });
+        }
+    }, [
+        enabled,
+        eagerLoad,
+        imgSrc,
+        isInView,
+        sizesAttr,
+        srcset.avif,
+        srcset.webp,
+        srcset.jpeg,
+        transparentPixel,
+    ]);
+}

package/dist/core/useMediaSelectionEffect.cjs

@@ -1,5 +1,10 @@
 import { useEffect } from 'react';
 const MEDIA_SELECTED_EVENT = 'dt:media-selected';
+const mediaSelectionHandler = () => {
+    // no-op: the real handler is attached in the builder via addEventListener
+};
+let mediaSelectionListenerCount = 0;
+let isMediaSelectionListenerAttached = false;
 export function sendMediaSelection(blockId, payload) {
     if (typeof window === 'undefined')
         return;
@@ -11,10 +16,17 @@ export function useMediaSelectionEffect() {
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const handler = () => {
-            // no-op: the real handler is attached in the builder via addEventListener
+        if (!isMediaSelectionListenerAttached) {
+            window.addEventListener(MEDIA_SELECTED_EVENT, mediaSelectionHandler);
+            isMediaSelectionListenerAttached = true;
+        }
+        mediaSelectionListenerCount += 1;
+        return () => {
+            mediaSelectionListenerCount -= 1;
+            if (mediaSelectionListenerCount <= 0 && isMediaSelectionListenerAttached) {
+                window.removeEventListener(MEDIA_SELECTED_EVENT, mediaSelectionHandler);
+                isMediaSelectionListenerAttached = false;
+            }
         };
-        window.addEventListener(MEDIA_SELECTED_EVENT, handler);
-        return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
     }, []);
 }

package/dist/core/useMediaSelectionEffect.js

@@ -1,5 +1,10 @@
 import { useEffect } from 'react';
 const MEDIA_SELECTED_EVENT = 'dt:media-selected';
+const mediaSelectionHandler = () => {
+    // no-op: the real handler is attached in the builder via addEventListener
+};
+let mediaSelectionListenerCount = 0;
+let isMediaSelectionListenerAttached = false;
 export function sendMediaSelection(blockId, payload) {
     if (typeof window === 'undefined')
         return;
@@ -11,10 +16,17 @@ export function useMediaSelectionEffect() {
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const handler = () => {
-            // no-op: the real handler is attached in the builder via addEventListener
+        if (!isMediaSelectionListenerAttached) {
+            window.addEventListener(MEDIA_SELECTED_EVENT, mediaSelectionHandler);
+            isMediaSelectionListenerAttached = true;
+        }
+        mediaSelectionListenerCount += 1;
+        return () => {
+            mediaSelectionListenerCount -= 1;
+            if (mediaSelectionListenerCount <= 0 && isMediaSelectionListenerAttached) {
+                window.removeEventListener(MEDIA_SELECTED_EVENT, mediaSelectionHandler);
+                isMediaSelectionListenerAttached = false;
+            }
         };
-        window.addEventListener(MEDIA_SELECTED_EVENT, handler);
-        return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
     }, []);
 }

package/dist/index.cjs

@@ -13,4 +13,3 @@ if (globalObject) {
     }
 }
 export * from './core/index.js';
-export * from './types.js';

package/dist/index.d.ts

@@ -1,2 +1,4 @@
+import type { UseOptimizedImageOptions } from '@page-speed/hooks/media';
 export * from './core/index.js';
-export * from './types.js';
+export type { ImageFormat, SrcsetByFormat, UseOptimizedImageOptions, UseOptimizedImageState, } from '@page-speed/hooks/media';
+export type OptixFlowConfig = UseOptimizedImageOptions['optixFlowConfig'];

package/dist/index.js

@@ -13,4 +13,3 @@ if (globalObject) {
     }
 }
 export * from './core/index.js';
-export * from './types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@page-speed/img",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "description": "Performance-optimized React Image component. Drop-in image implementation of web.dev best practices with zero configuration.",
   "keywords": [
     "react",
@@ -75,22 +75,23 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "@types/node": "^20.17.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.37.0",
     "happy-dom": "^15.11.7",
     "husky": "^9.1.7",
+    "terser": "^5.44.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.20",
-    "@vitejs/plugin-react": "^4.2.1",
-    "terser": "^5.44.0",
-    "vitest": "^3.2.4",
-    "@types/node": "^20.17.6"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@page-speed/hooks": "0.4.3"
+    "@opensite/hooks": "2.0.8",
+    "@page-speed/hooks": "0.4.5"
   },
   "packageManager": "pnpm@10.24.0",
   "engines": {