@page-speed/img 0.0.1 → 0.1.4

package/README.md

@@ -1,4 +1,4 @@
-![Page Speed React Img](https://github.com/user-attachments/assets/dadfdfb0-fe28-4e9c-9576-5c5213616d82)
+![Page Speed React Image Component](https://octane.cdn.ing/api/v1/images/transform?url=https://toastability-production.s3.amazonaws.com/gghtx0lxw9f2zigs427qc2phu024&q=85&f=avif)
 
 ---
 
@@ -17,3 +17,119 @@ Drop-in Image implementation of [web.dev](https://web.dev) best practices with z
 [Documentation](#documentation) · [Quick Start](#quick-start) · [Hooks](#hooks) · [Examples](#examples) · [Contributing](./CONTRIBUTING.md)
 
 ---
+
+## Documentation
+
+`@page-speed/img` is a React-first, OptixFlow-enabled image component that ships Lighthouse-friendly markup by default. It uses `useOptimizedImage` from `@page-speed/hooks` to compute pixel-perfect `src`, DPR-aware `srcset`, and `sizes` on the client without any CDN variant fetches. Tree shaking keeps the bundle lean—only the media hook is pulled in.
+
+### Installation
+
+```bash
+pnpm add @page-speed/img
+```
+
+Peer deps: `react` and `react-dom` (17+). For OptixFlow optimization, supply an API key.
+
+### Usage (React / Next.js)
+
+```tsx
+import { Img, setDefaultOptixFlowConfig } from "@page-speed/img";
+
+// Optional: set once at app start
+setDefaultOptixFlowConfig({ apiKey: process.env.NEXT_PUBLIC_OPTIX_API_KEY!, compressionLevel: 80 });
+
+export function HeroImage() {
+  return (
+    <Img
+      src="https://images.example.com/hero.jpg"
+      alt="Hero"
+      width={1280}
+      height={720}
+      // Per-image override (optional)
+      optixFlowConfig={{ renderedFileType: "jpeg" }}
+    />
+  );
+}
+```
+
+What you get:
+- Pixel-perfect primary `src` sized to the rendered element (Lighthouse “Properly size images” pass).
+- DPR-aware `srcset` (1x/2x) for AVIF/WebP/JPEG.
+- Lazy loading with IntersectionObserver; set `eager` for above-the-fold.
+- Optional OptixFlow compression/format selection with a single prop.
+
+### Props
+
+- `src` (string, required): Image URL.
+- `alt`, `title`, standard `<img>` attributes.
+- `width`, `height`: Set for CLS prevention; used as hints for sizing. Actual rendered size is measured to generate the pixel-perfect URL.
+- `loading`, `decoding`: Defaults `lazy` / `async`. Set `eager` to force above-the-fold fetch.
+- `sizes`: Override the auto-generated `sizes` from `useOptimizedImage`.
+- `intersectionMargin`, `intersectionThreshold`: Tweak lazy-load observer.
+- `optixFlowConfig`: `{ apiKey: string; compressionLevel?: number; renderedFileType?: 'avif' | 'webp' | 'jpeg' | 'png'; }`.
+
+### Global defaults (React & UMD)
+
+- Programmatic: `setDefaultOptixFlowConfig({ apiKey: '...' })` once during app init.
+- Browser global (UMD/inline):
+
+```html
+<script>
+  window.PageSpeedImgDefaults = {
+    optixFlowConfig: {
+      apiKey: "YOUR_OPTIX_KEY",
+      compressionLevel: 80
+    }
+  };
+</script>
+```
+
+`window.OpensiteImgDefaults` and `window.PAGE_SPEED_IMG_DEFAULTS` are also honored for backward compatibility.
+
+### UMD usage
+
+```html
+<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+<script src="https://cdn.jsdelivr.net/npm/@page-speed/img@0.0.2/dist/browser/page-speed-img.umd.js" crossorigin></script>
+
+<div id="app"></div>
+<script>
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+  root.render(
+    React.createElement(PageSpeedImg.Img, {
+      src: 'https://images.example.com/card.jpg',
+      alt: 'Card',
+      width: 800,
+      height: 600,
+      optixFlowConfig: { apiKey: 'YOUR_OPTIX_KEY', compressionLevel: 70 }
+    })
+  );
+</script>
+```
+
+### SSR considerations
+
+- The component is client-only (`"use client"`). For SSR apps, render it in client components/entry points.
+- Safe in non-browser contexts: guards exist for `window`/`IntersectionObserver`.
+
+### Tree shaking
+
+`@page-speed/img` only imports `useOptimizedImage` from `@page-speed/hooks`, keeping bundles small. Both ESM and CJS builds are emitted; UMD is externalized to React/ReactDOM.
+
+### Testing
+
+```bash
+pnpm test
+```
+
+### Roadmap
+
+- Remove legacy `mediaId` shim once internal consumers migrate to the new `src` + OptixFlow path.
+- Add storybook examples for common layouts (hero, gallery, card).
+
+---
+
+## Contributing
+
+PRs welcome. Please run `pnpm test` before submitting.

package/dist/browser/page-speed-img.umd.cjs

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).PageSpeedImg={},e.React)}(this,function(e,t){"use strict";var n=[1,2];const i=new Map;function r(e,t){i.set(e,t)}const o="https://cdn.ing";function l(e){return(e??o).replace(/\/$/,"")}function s(e,t){return`${l(t)}/assets/images/${e}`}function a(e,t){return`${l(t)}/i/r/${e}`}function u(e){return!!e&&["AVIF","WEBP","JPEG"].some(t=>{const n=null==e?void 0:e[t];return!!(i=n)&&[i.sm,i.md,i.lg,i.full].some(e=>"string"==typeof e&&e.trim().length>0);var i})}function d(e){return"string"==typeof e&&e.trim().length>0}function c(e){var t;if(!e)return!1;if(u((null==(t=e.variants_data)?void 0:t.variants)??null))return!0;const n=e;return[n.img_url,n.file_data_url,n.file_data_thumbnail_url,n.img_src,n.med_src,n.thumb_src,n.low_res_thumb].some(d)}async function f(e,t){const n=await fetch(e,{signal:t});if(!n.ok){const t=new Error(`Failed to fetch image data (status ${n.status}) from ${e}`);throw t.status=n.status,t}return await n.json()}async function m(e,t={}){if(!Number.isFinite(e))throw new Error("Invalid mediaId provided to fetchImageData");const n=l(t.cdnHost),o=`image:${n}:${e}`;if(!t.bypassCache){const e=(u=o,i.get(u));if(e)return e}var u;const d=[s(e,n),a(e,n)];let m;for(const i of d)try{const e=await f(i,t.signal);return c(e)&&r(o,e),e}catch(g){if("AbortError"===(null==g?void 0:g.name))throw g;m=g}if(m instanceof Error)throw m;throw new Error(`Failed to fetch image data for mediaId ${e}`)}const g="dt:media-selected";function h(){t.useEffect(()=>{if("undefined"==typeof window)return;const e=()=>{};return window.addEventListener(g,e),()=>window.removeEventListener(g,e)},[])}function v(e){e&&e.querySelectorAll("source").forEach(e=>{const t=e.getAttribute("srcset");t&&(e.setAttribute("data-srcset",t),e.removeAttribute("srcset"),requestAnimationFrame(()=>{e.setAttribute("srcset",t)}))})}function w(e){t.useEffect(()=>{const t=e.current;t&&(t instanceof HTMLPictureElement?v(t):t.parentElement instanceof HTMLPictureElement&&v(t.parentElement))},[e])}const p={sm:640,md:1024,lg:1536,full:2560};let b;const E=new Set,y=e=>e??b??(()=>{var e,t,n;if("undefined"==typeof globalThis)return;const i=globalThis;return(null==(e=i.PageSpeedImgDefaults)?void 0:e.optixFlowConfig)||(null==(t=i.OpensiteImgDefaults)?void 0:t.optixFlowConfig)||(null==(n=i.PAGE_SPEED_IMG_DEFAULTS)?void 0:n.optixFlowConfig)})(),_=e=>"string"==typeof e&&e.trim().length>0,I=e=>{if("number"==typeof e&&Number.isFinite(e))return e;if("string"==typeof e){const t=Number(e);if(Number.isFinite(t))return t}};function A(e){const t=null==e?void 0:e.widths;return t?{sm:t.small??t.sm??p.sm,md:t.medium??t.md??p.md,lg:t.large??t.lg??p.lg,full:t.full_size??t.full??p.full}:null}function M(e){if(e)return e.md||e.lg||e.sm||e.full||Object.values(e).find(Boolean)}const S=({sizes:e,loading:i,decoding:r,alt:o,title:l,src:s,eager:a,intersectionMargin:u,intersectionThreshold:d,optixFlowConfig:c,forwardedRef:f,...m})=>{const g=t.useRef(null),v=t.useRef(null);w(v),h();const p=t.useMemo(()=>"string"==typeof s?s.trim():"",[s]),b=t.useMemo(()=>I(m.width),[m]),E=t.useMemo(()=>I(m.height),[m]),_=t.useMemo(()=>y(c),[c]),A=a??"eager"===i,{ref:M,src:S,srcset:$,sizes:x,loading:z,size:F}=function(e){const{src:i,eager:r=!1,threshold:o=.1,rootMargin:l="50px",width:s,height:a,optixFlowConfig:u}=e,d=t.useMemo(()=>null==u?void 0:u.apiKey,[null==u?void 0:u.apiKey]),c=t.useMemo(()=>!!d,[d]),[f,m]=t.useState({isLoaded:!1,isInView:!1}),[g,h]=t.useState({width:s??0,height:a??0}),v=t.useRef(null),w=t.useRef(null);t.useEffect(()=>{void 0===s&&void 0===a||h(e=>({width:s??e.width,height:a??e.height}))},[s,a]),t.useEffect(()=>{if(!v.current)return;const e=()=>{const e=v.current;if(!e)return;const t=s??(Math.round(e.clientWidth)||e.naturalWidth||0),n=a??(Math.round(e.clientHeight)||e.naturalHeight||0);(t>0||n>0)&&h(e=>e.width!==t||e.height!==n?{width:t,height:n}:e)};v.current.clientWidth>0&&e();const t=v.current;t.addEventListener("load",e);let n=null;return"undefined"!=typeof ResizeObserver&&(n=new ResizeObserver(()=>{e()}),n.observe(t)),()=>{t.removeEventListener("load",e),null==n||n.disconnect()}},[s,a,f.isLoaded]);const p=t.useCallback((e,t,n)=>{if(!c)return i;const r=new URLSearchParams;return r.set("url",i),r.set("w",String(e)),r.set("h",String(t)),r.set("q",String((null==u?void 0:u.compressionLevel)??75)),r.set("f",n),r.set("apiKey",d),`https://octane.cdn.ing/api/v1/images/transform?${r.toString()}`},[c,i,null==u?void 0:u.compressionLevel,d]),b=t.useCallback((e,t,i)=>c&&0!==e&&0!==t?n.map(n=>{const r=Math.round(e*n),o=Math.round(t*n);return`${p(r,o,i)} ${n}x`}).join(", "):"",[c,p]),E=t.useMemo(()=>{if(!c)return i;const e=(null==u?void 0:u.renderedFileType)??"jpeg";return p(g.width,g.height,e)},[c,i,g.width,g.height,null==u?void 0:u.renderedFileType,p]),y=t.useMemo(()=>({avif:b(g.width,g.height,"avif"),webp:b(g.width,g.height,"webp"),jpeg:b(g.width,g.height,"jpeg")}),[g.width,g.height,b]),_=t.useMemo(()=>0===g.width?"":`${g.width}px`,[g.width]);return t.useEffect(()=>{if("undefined"!=typeof window&&v.current){if(!r)return w.current=new IntersectionObserver(([e])=>{var t;e.isIntersecting&&(m(e=>({...e,isInView:!0})),null==(t=w.current)||t.disconnect())},{threshold:o,rootMargin:l}),w.current.observe(v.current),()=>{var e;null==(e=w.current)||e.disconnect()};m({isLoaded:!1,isInView:!0})}},[r,o,l]),t.useEffect(()=>{if(!v.current)return;const e=()=>{m(e=>({...e,isLoaded:!0}))},t=v.current;if(!t.complete)return t.addEventListener("load",e),()=>t.removeEventListener("load",e);e()},[f.isInView]),{ref:t.useCallback(e=>{v.current=e},[]),src:f.isInView||r?E:"",srcset:f.isInView||r?y:{avif:"",webp:"",jpeg:""},sizes:f.isInView||r?_:"",isLoaded:f.isLoaded,isInView:f.isInView,loading:r?"eager":"lazy",size:g}}({src:p,eager:A,width:b,height:E,rootMargin:u??"200px",threshold:d??.1,optixFlowConfig:_}),L=((e,n,i)=>t.useCallback(t=>{e(t),i.current=t,"function"==typeof n?n(t):n&&"object"==typeof n&&(n.current=t)},[e,n,i]))(M,f,g),{width:C,height:P,...R}=m,j=e??(x||void 0),T=i??z??"lazy",N=r??"async",O=Boolean($.avif||$.webp||$.jpeg),V=S||p||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",D=!O||$.avif||$.webp?"":$.jpeg,k=C??(F.width||b||void 0),W=P??(F.height||E||void 0);return O?t.createElement("picture",{ref:v},$.avif?t.createElement("source",{type:"image/avif",srcSet:$.avif,sizes:j}):null,$.webp?t.createElement("source",{type:"image/webp",srcSet:$.webp,sizes:j}):null,t.createElement("img",{ref:L,src:V,srcSet:D||void 0,sizes:D?j:void 0,loading:T,decoding:N,alt:o,title:l,width:k,height:W,...R})):t.createElement("img",{ref:L,src:V,loading:T,decoding:N,alt:o,title:l,width:k,height:W,...R})},$=({mediaId:e,cdnHost:n,sizes:i,onImageData:r,loading:s,decoding:a,alt:d,title:c,src:f,forwardedRef:g,...v})=>{const b=t.useRef(null),E=t.useRef(null);t.useImperativeHandle(g,()=>b.current),w(E),h();const[y,I]=t.useState(null),[S,$]=t.useState(0),x=Number.isFinite(e),z=s??"lazy",F=a??"async",[L,C]=t.useState(()=>!x||"lazy"!==z),P=t.useMemo(()=>(n??o).replace(/\/$/,""),[n]);t.useEffect(()=>{if(!x)return I(null),void $(0);I(null),$(0)},[x,e,n]),t.useEffect(()=>{if(!x)return;const t=new AbortController;return m(e,{cdnHost:n,signal:t.signal,bypassCache:S>0}).then(e=>{I(e),null==r||r(e)}).catch(e=>{"AbortError"!==(null==e?void 0:e.name)&&console.warn("Image data fetch failed:",e)}),()=>t.abort()},[x,e,n,r,S]),t.useEffect(()=>{C(!x||"lazy"!==z)},[x,e,z]),t.useEffect(()=>{if(!x||"lazy"!==z||L)return;if("undefined"==typeof window||void 0===window.IntersectionObserver)return void C(!0);const e=b.current;if(!e)return;const t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(C(!0),t.disconnect())},{rootMargin:"200px"});return t.observe(e),()=>t.disconnect()},[x,z,L]);const R=t.useMemo(()=>{var e,t,n;if(!y)return null;const i=(null==(e=y.variants_data)?void 0:e.variants)??{},r=i.WEBP,o=i.AVIF,l=i.JPEG,s=A(null==(t=i.WEBP)?void 0:t.metadata)||A(null==(n=i.JPEG)?void 0:n.metadata)||{...p},a=e=>(e=>{if(_(e))return/^https?:\/\//i.test(e)||e.startsWith("data:")?e:e.startsWith("//")?`https:${e}`:e.startsWith("/")?`${P}${e}`:`${P}/${e}`})("string"==typeof e?e:void 0),u=[M(r),M(l),M(o),null==r?void 0:r.sm,null==r?void 0:r.md,null==r?void 0:r.lg,null==r?void 0:r.full,null==l?void 0:l.sm,null==l?void 0:l.md,null==l?void 0:l.lg,null==l?void 0:l.full,null==o?void 0:o.sm,null==o?void 0:o.md,null==o?void 0:o.lg,null==o?void 0:o.full].map(e=>a(e??void 0)).filter(_),d=y,c=[d.img_url,d.file_data_url,d.file_data_thumbnail_url,d.img_src,d.med_src,d.thumb_src,d.low_res_thumb].map(e=>_(e)?a(e):void 0).filter(_),f=d.fallback_url?[a(d.fallback_url)].filter(_):[],m=[...u,...c,...f][0];if(!m)return null;return{webp:r,avif:o,jpeg:l,toSrcSet:e=>{if(!e)return;const t=[],n=(e,n)=>{const i=a(e);i&&n&&t.push(`${i} ${n}w`)};return n(e.sm,s.sm),n(e.md,s.md),n(e.lg,s.lg),n(e.full,s.full),t.length?t.join(", "):void 0},fallback:m,widths:s,hasVariantSource:u.length>0}},[y,P]),j=t.useMemo(()=>{var e;return u((null==(e=null==y?void 0:y.variants_data)?void 0:e.variants)??null)},[y]),T=t.useMemo(()=>{var e;const t=(null==(e=null==y?void 0:y.variants_data)?void 0:e.status)??(null==y?void 0:y.variants_status)??"";return"string"==typeof t?t.toLowerCase():""},[y]),N="failed"===T||"error"===T,O=x&&Boolean(y)&&!N&&!j&&S<5;t.useEffect(()=>{if(!O)return;if("undefined"==typeof window)return;const e=window.setTimeout(()=>{$(e=>e+1)},3e3);return()=>window.clearTimeout(e)},[O]);const V=t.useMemo(()=>{var e,t;return"string"==typeof d?d:(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.summary)??void 0},[d,y]),D=t.useMemo(()=>{var e,t;return"string"==typeof c?c:(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.title)??void 0},[c,y]),k=t.useMemo(()=>{var e,t,n,i;return(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.sizing)?void 0:t.width)??(null==(i=null==(n=null==y?void 0:y.variants_data)?void 0:n.metadata)?void 0:i.width)??void 0},[y]),W=t.useMemo(()=>{var e,t,n,i;return(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.sizing)?void 0:t.height)??(null==(i=null==(n=null==y?void 0:y.variants_data)?void 0:n.metadata)?void 0:i.height)??void 0},[y]),B=t.useMemo(()=>{var e,t;const n=null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.optimized_filename;if(!n)return;const i=null==R?void 0:R.fallback;if(!i)return;const r=i.lastIndexOf(".");return`${n}.${r>-1?i.slice(r+1).toLowerCase():"jpg"}`},[y,R]);if(!x){const e={...v};return t.createElement("img",{ref:b,src:f,loading:z,decoding:F,alt:V,title:D,width:e.width,height:e.height,...e})}const H=function(e,t){return`${l(t)}/assets/low_res_thumb/${e}`}(e,n);if(!y||!R||!L){const e={...v};return t.createElement("img",{ref:b,src:H,loading:z,decoding:F,alt:V,title:D,width:e.width??k,height:e.height??W,...e})}const G=i??"(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px",{webp:q,avif:J,jpeg:K,toSrcSet:U,fallback:Q}=R,X=U(q),Y=U(J),Z=U(K);return X||Y||Z?t.createElement("picture",null,Y?t.createElement("source",{type:"image/avif",srcSet:Y,sizes:G}):null,X?t.createElement("source",{type:"image/webp",srcSet:X,sizes:G}):null,t.createElement("img",{ref:b,src:Q,srcSet:!Z||X||Y?void 0:Z,sizes:!Z||X||Y?void 0:G,loading:z,decoding:F,alt:V,title:D,width:k,height:W,"data-filename":B,...v})):t.createElement("img",{ref:b,src:Q,loading:z,decoding:F,alt:V,title:D,width:k,height:W,"data-filename":B,...v})},x=t.forwardRef(function(e,n){if(Number.isFinite(e.mediaId))return(e=>{if(!Number.isFinite(e)||null==e)return;const t=e;E.has(t)||(E.add(t),"undefined"!=typeof console&&console.warn&&console.warn("[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.",{mediaId:t}))})(e.mediaId),t.createElement($,{...e,forwardedRef:n});return"string"==typeof e.src&&e.src.trim().length>0?t.createElement(S,{...e,forwardedRef:n}):("undefined"!=typeof console&&console.warn&&console.warn("<Img /> requires either src or mediaId. No src provided, rendering null."),null)}),z=t.memo(x);z.displayName="PageSpeedImg";const F="undefined"!=typeof globalThis?globalThis:void 0;if(F)if(F.process){const e=F.process.env??(F.process.env={});void 0===e.NODE_ENV&&(e.NODE_ENV="production")}else F.process={env:{NODE_ENV:"production"}};e.Img=z,e.setDefaultOptixFlowConfig=e=>{b=e??void 0},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=page-speed-img.umd.js.map

package/dist/browser/page-speed-img.umd.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).PageSpeedImg={},e.React)}(this,function(e,t){"use strict";var n=[1,2];const i=new Map;function r(e,t){i.set(e,t)}const o="https://cdn.ing";function l(e){return(e??o).replace(/\/$/,"")}function s(e,t){return`${l(t)}/assets/images/${e}`}function a(e,t){return`${l(t)}/i/r/${e}`}function u(e){return!!e&&["AVIF","WEBP","JPEG"].some(t=>{const n=null==e?void 0:e[t];return!!(i=n)&&[i.sm,i.md,i.lg,i.full].some(e=>"string"==typeof e&&e.trim().length>0);var i})}function d(e){return"string"==typeof e&&e.trim().length>0}function c(e){var t;if(!e)return!1;if(u((null==(t=e.variants_data)?void 0:t.variants)??null))return!0;const n=e;return[n.img_url,n.file_data_url,n.file_data_thumbnail_url,n.img_src,n.med_src,n.thumb_src,n.low_res_thumb].some(d)}async function f(e,t){const n=await fetch(e,{signal:t});if(!n.ok){const t=new Error(`Failed to fetch image data (status ${n.status}) from ${e}`);throw t.status=n.status,t}return await n.json()}async function m(e,t={}){if(!Number.isFinite(e))throw new Error("Invalid mediaId provided to fetchImageData");const n=l(t.cdnHost),o=`image:${n}:${e}`;if(!t.bypassCache){const e=(u=o,i.get(u));if(e)return e}var u;const d=[s(e,n),a(e,n)];let m;for(const i of d)try{const e=await f(i,t.signal);return c(e)&&r(o,e),e}catch(g){if("AbortError"===(null==g?void 0:g.name))throw g;m=g}if(m instanceof Error)throw m;throw new Error(`Failed to fetch image data for mediaId ${e}`)}const g="dt:media-selected";function h(){t.useEffect(()=>{if("undefined"==typeof window)return;const e=()=>{};return window.addEventListener(g,e),()=>window.removeEventListener(g,e)},[])}function v(e){e&&e.querySelectorAll("source").forEach(e=>{const t=e.getAttribute("srcset");t&&(e.setAttribute("data-srcset",t),e.removeAttribute("srcset"),requestAnimationFrame(()=>{e.setAttribute("srcset",t)}))})}function w(e){t.useEffect(()=>{const t=e.current;t&&(t instanceof HTMLPictureElement?v(t):t.parentElement instanceof HTMLPictureElement&&v(t.parentElement))},[e])}const p={sm:640,md:1024,lg:1536,full:2560};let b;const E=new Set,y=e=>e??b??(()=>{var e,t,n;if("undefined"==typeof globalThis)return;const i=globalThis;return(null==(e=i.PageSpeedImgDefaults)?void 0:e.optixFlowConfig)||(null==(t=i.OpensiteImgDefaults)?void 0:t.optixFlowConfig)||(null==(n=i.PAGE_SPEED_IMG_DEFAULTS)?void 0:n.optixFlowConfig)})(),_=e=>"string"==typeof e&&e.trim().length>0,I=e=>{if("number"==typeof e&&Number.isFinite(e))return e;if("string"==typeof e){const t=Number(e);if(Number.isFinite(t))return t}};function A(e){const t=null==e?void 0:e.widths;return t?{sm:t.small??t.sm??p.sm,md:t.medium??t.md??p.md,lg:t.large??t.lg??p.lg,full:t.full_size??t.full??p.full}:null}function M(e){if(e)return e.md||e.lg||e.sm||e.full||Object.values(e).find(Boolean)}const S=({sizes:e,loading:i,decoding:r,alt:o,title:l,src:s,eager:a,intersectionMargin:u,intersectionThreshold:d,optixFlowConfig:c,forwardedRef:f,...m})=>{const g=t.useRef(null),v=t.useRef(null);w(v),h();const p=t.useMemo(()=>"string"==typeof s?s.trim():"",[s]),b=t.useMemo(()=>I(m.width),[m]),E=t.useMemo(()=>I(m.height),[m]),_=t.useMemo(()=>y(c),[c]),A=a??"eager"===i,{ref:M,src:S,srcset:$,sizes:x,loading:z,size:F}=function(e){const{src:i,eager:r=!1,threshold:o=.1,rootMargin:l="50px",width:s,height:a,optixFlowConfig:u}=e,d=t.useMemo(()=>null==u?void 0:u.apiKey,[null==u?void 0:u.apiKey]),c=t.useMemo(()=>!!d,[d]),[f,m]=t.useState({isLoaded:!1,isInView:!1}),[g,h]=t.useState({width:s??0,height:a??0}),v=t.useRef(null),w=t.useRef(null);t.useEffect(()=>{void 0===s&&void 0===a||h(e=>({width:s??e.width,height:a??e.height}))},[s,a]),t.useEffect(()=>{if(!v.current)return;const e=()=>{const e=v.current;if(!e)return;const t=s??(Math.round(e.clientWidth)||e.naturalWidth||0),n=a??(Math.round(e.clientHeight)||e.naturalHeight||0);(t>0||n>0)&&h(e=>e.width!==t||e.height!==n?{width:t,height:n}:e)};v.current.clientWidth>0&&e();const t=v.current;t.addEventListener("load",e);let n=null;return"undefined"!=typeof ResizeObserver&&(n=new ResizeObserver(()=>{e()}),n.observe(t)),()=>{t.removeEventListener("load",e),null==n||n.disconnect()}},[s,a,f.isLoaded]);const p=t.useCallback((e,t,n)=>{if(!c)return i;const r=new URLSearchParams;return r.set("url",i),r.set("w",String(e)),r.set("h",String(t)),r.set("q",String((null==u?void 0:u.compressionLevel)??75)),r.set("f",n),r.set("apiKey",d),`https://octane.cdn.ing/api/v1/images/transform?${r.toString()}`},[c,i,null==u?void 0:u.compressionLevel,d]),b=t.useCallback((e,t,i)=>c&&0!==e&&0!==t?n.map(n=>{const r=Math.round(e*n),o=Math.round(t*n);return`${p(r,o,i)} ${n}x`}).join(", "):"",[c,p]),E=t.useMemo(()=>{if(!c)return i;const e=(null==u?void 0:u.renderedFileType)??"jpeg";return p(g.width,g.height,e)},[c,i,g.width,g.height,null==u?void 0:u.renderedFileType,p]),y=t.useMemo(()=>({avif:b(g.width,g.height,"avif"),webp:b(g.width,g.height,"webp"),jpeg:b(g.width,g.height,"jpeg")}),[g.width,g.height,b]),_=t.useMemo(()=>0===g.width?"":`${g.width}px`,[g.width]);return t.useEffect(()=>{if("undefined"!=typeof window&&v.current){if(!r)return w.current=new IntersectionObserver(([e])=>{var t;e.isIntersecting&&(m(e=>({...e,isInView:!0})),null==(t=w.current)||t.disconnect())},{threshold:o,rootMargin:l}),w.current.observe(v.current),()=>{var e;null==(e=w.current)||e.disconnect()};m({isLoaded:!1,isInView:!0})}},[r,o,l]),t.useEffect(()=>{if(!v.current)return;const e=()=>{m(e=>({...e,isLoaded:!0}))},t=v.current;if(!t.complete)return t.addEventListener("load",e),()=>t.removeEventListener("load",e);e()},[f.isInView]),{ref:t.useCallback(e=>{v.current=e},[]),src:f.isInView||r?E:"",srcset:f.isInView||r?y:{avif:"",webp:"",jpeg:""},sizes:f.isInView||r?_:"",isLoaded:f.isLoaded,isInView:f.isInView,loading:r?"eager":"lazy",size:g}}({src:p,eager:A,width:b,height:E,rootMargin:u??"200px",threshold:d??.1,optixFlowConfig:_}),L=((e,n,i)=>t.useCallback(t=>{e(t),i.current=t,"function"==typeof n?n(t):n&&"object"==typeof n&&(n.current=t)},[e,n,i]))(M,f,g),{width:C,height:P,...R}=m,j=e??(x||void 0),T=i??z??"lazy",N=r??"async",O=Boolean($.avif||$.webp||$.jpeg),V=S||p||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",D=!O||$.avif||$.webp?"":$.jpeg,k=C??(F.width||b||void 0),W=P??(F.height||E||void 0);return O?t.createElement("picture",{ref:v},$.avif?t.createElement("source",{type:"image/avif",srcSet:$.avif,sizes:j}):null,$.webp?t.createElement("source",{type:"image/webp",srcSet:$.webp,sizes:j}):null,t.createElement("img",{ref:L,src:V,srcSet:D||void 0,sizes:D?j:void 0,loading:T,decoding:N,alt:o,title:l,width:k,height:W,...R})):t.createElement("img",{ref:L,src:V,loading:T,decoding:N,alt:o,title:l,width:k,height:W,...R})},$=({mediaId:e,cdnHost:n,sizes:i,onImageData:r,loading:s,decoding:a,alt:d,title:c,src:f,forwardedRef:g,...v})=>{const b=t.useRef(null),E=t.useRef(null);t.useImperativeHandle(g,()=>b.current),w(E),h();const[y,I]=t.useState(null),[S,$]=t.useState(0),x=Number.isFinite(e),z=s??"lazy",F=a??"async",[L,C]=t.useState(()=>!x||"lazy"!==z),P=t.useMemo(()=>(n??o).replace(/\/$/,""),[n]);t.useEffect(()=>{if(!x)return I(null),void $(0);I(null),$(0)},[x,e,n]),t.useEffect(()=>{if(!x)return;const t=new AbortController;return m(e,{cdnHost:n,signal:t.signal,bypassCache:S>0}).then(e=>{I(e),null==r||r(e)}).catch(e=>{"AbortError"!==(null==e?void 0:e.name)&&console.warn("Image data fetch failed:",e)}),()=>t.abort()},[x,e,n,r,S]),t.useEffect(()=>{C(!x||"lazy"!==z)},[x,e,z]),t.useEffect(()=>{if(!x||"lazy"!==z||L)return;if("undefined"==typeof window||void 0===window.IntersectionObserver)return void C(!0);const e=b.current;if(!e)return;const t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(C(!0),t.disconnect())},{rootMargin:"200px"});return t.observe(e),()=>t.disconnect()},[x,z,L]);const R=t.useMemo(()=>{var e,t,n;if(!y)return null;const i=(null==(e=y.variants_data)?void 0:e.variants)??{},r=i.WEBP,o=i.AVIF,l=i.JPEG,s=A(null==(t=i.WEBP)?void 0:t.metadata)||A(null==(n=i.JPEG)?void 0:n.metadata)||{...p},a=e=>(e=>{if(_(e))return/^https?:\/\//i.test(e)||e.startsWith("data:")?e:e.startsWith("//")?`https:${e}`:e.startsWith("/")?`${P}${e}`:`${P}/${e}`})("string"==typeof e?e:void 0),u=[M(r),M(l),M(o),null==r?void 0:r.sm,null==r?void 0:r.md,null==r?void 0:r.lg,null==r?void 0:r.full,null==l?void 0:l.sm,null==l?void 0:l.md,null==l?void 0:l.lg,null==l?void 0:l.full,null==o?void 0:o.sm,null==o?void 0:o.md,null==o?void 0:o.lg,null==o?void 0:o.full].map(e=>a(e??void 0)).filter(_),d=y,c=[d.img_url,d.file_data_url,d.file_data_thumbnail_url,d.img_src,d.med_src,d.thumb_src,d.low_res_thumb].map(e=>_(e)?a(e):void 0).filter(_),f=d.fallback_url?[a(d.fallback_url)].filter(_):[],m=[...u,...c,...f][0];if(!m)return null;return{webp:r,avif:o,jpeg:l,toSrcSet:e=>{if(!e)return;const t=[],n=(e,n)=>{const i=a(e);i&&n&&t.push(`${i} ${n}w`)};return n(e.sm,s.sm),n(e.md,s.md),n(e.lg,s.lg),n(e.full,s.full),t.length?t.join(", "):void 0},fallback:m,widths:s,hasVariantSource:u.length>0}},[y,P]),j=t.useMemo(()=>{var e;return u((null==(e=null==y?void 0:y.variants_data)?void 0:e.variants)??null)},[y]),T=t.useMemo(()=>{var e;const t=(null==(e=null==y?void 0:y.variants_data)?void 0:e.status)??(null==y?void 0:y.variants_status)??"";return"string"==typeof t?t.toLowerCase():""},[y]),N="failed"===T||"error"===T,O=x&&Boolean(y)&&!N&&!j&&S<5;t.useEffect(()=>{if(!O)return;if("undefined"==typeof window)return;const e=window.setTimeout(()=>{$(e=>e+1)},3e3);return()=>window.clearTimeout(e)},[O]);const V=t.useMemo(()=>{var e,t;return"string"==typeof d?d:(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.summary)??void 0},[d,y]),D=t.useMemo(()=>{var e,t;return"string"==typeof c?c:(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.title)??void 0},[c,y]),k=t.useMemo(()=>{var e,t,n,i;return(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.sizing)?void 0:t.width)??(null==(i=null==(n=null==y?void 0:y.variants_data)?void 0:n.metadata)?void 0:i.width)??void 0},[y]),W=t.useMemo(()=>{var e,t,n,i;return(null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.sizing)?void 0:t.height)??(null==(i=null==(n=null==y?void 0:y.variants_data)?void 0:n.metadata)?void 0:i.height)??void 0},[y]),B=t.useMemo(()=>{var e,t;const n=null==(t=null==(e=null==y?void 0:y.meta)?void 0:e.content_manifest)?void 0:t.optimized_filename;if(!n)return;const i=null==R?void 0:R.fallback;if(!i)return;const r=i.lastIndexOf(".");return`${n}.${r>-1?i.slice(r+1).toLowerCase():"jpg"}`},[y,R]);if(!x){const e={...v};return t.createElement("img",{ref:b,src:f,loading:z,decoding:F,alt:V,title:D,width:e.width,height:e.height,...e})}const H=function(e,t){return`${l(t)}/assets/low_res_thumb/${e}`}(e,n);if(!y||!R||!L){const e={...v};return t.createElement("img",{ref:b,src:H,loading:z,decoding:F,alt:V,title:D,width:e.width??k,height:e.height??W,...e})}const G=i??"(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px",{webp:q,avif:J,jpeg:K,toSrcSet:U,fallback:Q}=R,X=U(q),Y=U(J),Z=U(K);return X||Y||Z?t.createElement("picture",null,Y?t.createElement("source",{type:"image/avif",srcSet:Y,sizes:G}):null,X?t.createElement("source",{type:"image/webp",srcSet:X,sizes:G}):null,t.createElement("img",{ref:b,src:Q,srcSet:!Z||X||Y?void 0:Z,sizes:!Z||X||Y?void 0:G,loading:z,decoding:F,alt:V,title:D,width:k,height:W,"data-filename":B,...v})):t.createElement("img",{ref:b,src:Q,loading:z,decoding:F,alt:V,title:D,width:k,height:W,"data-filename":B,...v})},x=t.forwardRef(function(e,n){if(Number.isFinite(e.mediaId))return(e=>{if(!Number.isFinite(e)||null==e)return;const t=e;E.has(t)||(E.add(t),"undefined"!=typeof console&&console.warn&&console.warn("[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.",{mediaId:t}))})(e.mediaId),t.createElement($,{...e,forwardedRef:n});return"string"==typeof e.src&&e.src.trim().length>0?t.createElement(S,{...e,forwardedRef:n}):("undefined"!=typeof console&&console.warn&&console.warn("<Img /> requires either src or mediaId. No src provided, rendering null."),null)}),z=t.memo(x);z.displayName="PageSpeedImg";const F="undefined"!=typeof globalThis?globalThis:void 0;if(F)if(F.process){const e=F.process.env??(F.process.env={});void 0===e.NODE_ENV&&(e.NODE_ENV="production")}else F.process={env:{NODE_ENV:"production"}};e.Img=z,e.setDefaultOptixFlowConfig=e=>{b=e??void 0},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=page-speed-img.umd.js.map

package/dist/browser/page-speed-img.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-speed-img.umd.js","sources":["../../node_modules/.pnpm/@page-speed+hooks@0.1.5_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@page-speed/hooks/dist/chunk-N6IWQITG.js","../../src/utils/cache.ts","../../src/utils/api.ts","../../src/core/useMediaSelectionEffect.ts","../../src/core/useResponsiveReset.ts","../../src/core/Img.tsx","../../src/index.ts"],"sourcesContent":["import { useMemo, useState, useRef, useEffect, useCallback } from 'react';\n\nvar BASE_URL = \"https://octane.cdn.ing/api/v1/images/transform?\";\nvar DPR_MULTIPLIERS = [1, 2];\nfunction useOptimizedImage(options) {\n  const {\n    src,\n    eager = false,\n    threshold = 0.1,\n    rootMargin = \"50px\",\n    width,\n    height,\n    optixFlowConfig\n  } = options;\n  const optixFlowApiKey = useMemo(() => {\n    return optixFlowConfig?.apiKey;\n  }, [optixFlowConfig?.apiKey]);\n  const useOptixFlow = useMemo(() => {\n    return optixFlowApiKey ? true : false;\n  }, [optixFlowApiKey]);\n  const [state, setState] = useState({\n    isLoaded: false,\n    isInView: false\n  });\n  const [size, setSize] = useState({\n    width: width ?? 0,\n    height: height ?? 0\n  });\n  const imgRef = useRef(null);\n  const observerRef = useRef(null);\n  useEffect(() => {\n    if (width !== void 0 || height !== void 0) {\n      setSize((prev) => ({\n        width: width ?? prev.width,\n        height: height ?? prev.height\n      }));\n    }\n  }, [width, height]);\n  useEffect(() => {\n    if (!imgRef.current) return;\n    const calculateRenderedSize = () => {\n      const img2 = imgRef.current;\n      if (!img2) return;\n      const renderedWidth = width ?? (Math.round(img2.clientWidth) || img2.naturalWidth || 0);\n      const renderedHeight = height ?? (Math.round(img2.clientHeight) || img2.naturalHeight || 0);\n      if (renderedWidth > 0 || renderedHeight > 0) {\n        setSize((prev) => {\n          if (prev.width !== renderedWidth || prev.height !== renderedHeight) {\n            return { width: renderedWidth, height: renderedHeight };\n          }\n          return prev;\n        });\n      }\n    };\n    if (imgRef.current.clientWidth > 0) {\n      calculateRenderedSize();\n    }\n    const img = imgRef.current;\n    img.addEventListener(\"load\", calculateRenderedSize);\n    let resizeObserver = null;\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(() => {\n        calculateRenderedSize();\n      });\n      resizeObserver.observe(img);\n    }\n    return () => {\n      img.removeEventListener(\"load\", calculateRenderedSize);\n      resizeObserver?.disconnect();\n    };\n  }, [width, height, state.isLoaded]);\n  const buildOptixFlowUrl = useCallback(\n    (imgWidth, imgHeight, format) => {\n      if (!useOptixFlow) return src;\n      const params = new URLSearchParams();\n      params.set(\"url\", src);\n      params.set(\"w\", String(imgWidth));\n      params.set(\"h\", String(imgHeight));\n      params.set(\"q\", String(optixFlowConfig?.compressionLevel ?? 75));\n      params.set(\"f\", format);\n      params.set(\"apiKey\", optixFlowApiKey);\n      return `${BASE_URL}${params.toString()}`;\n    },\n    [useOptixFlow, src, optixFlowConfig?.compressionLevel, optixFlowApiKey]\n  );\n  const generateSrcset = useCallback(\n    (baseWidth, baseHeight, format) => {\n      if (!useOptixFlow || baseWidth === 0 || baseHeight === 0) return \"\";\n      return DPR_MULTIPLIERS.map((dpr) => {\n        const scaledWidth = Math.round(baseWidth * dpr);\n        const scaledHeight = Math.round(baseHeight * dpr);\n        const url = buildOptixFlowUrl(scaledWidth, scaledHeight, format);\n        return `${url} ${dpr}x`;\n      }).join(\", \");\n    },\n    [useOptixFlow, buildOptixFlowUrl]\n  );\n  const primarySrc = useMemo(() => {\n    if (!useOptixFlow) return src;\n    const fallbackFormat = optixFlowConfig?.renderedFileType ?? \"jpeg\";\n    return buildOptixFlowUrl(size.width, size.height, fallbackFormat);\n  }, [useOptixFlow, src, size.width, size.height, optixFlowConfig?.renderedFileType, buildOptixFlowUrl]);\n  const srcset = useMemo(() => {\n    return {\n      avif: generateSrcset(size.width, size.height, \"avif\"),\n      webp: generateSrcset(size.width, size.height, \"webp\"),\n      jpeg: generateSrcset(size.width, size.height, \"jpeg\")\n    };\n  }, [size.width, size.height, generateSrcset]);\n  const sizes = useMemo(() => {\n    if (size.width === 0) return \"\";\n    return `${size.width}px`;\n  }, [size.width]);\n  useEffect(() => {\n    if (typeof window === \"undefined\" || !imgRef.current) {\n      return;\n    }\n    if (eager) {\n      setState({ isLoaded: false, isInView: true });\n      return;\n    }\n    observerRef.current = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setState((prev) => ({ ...prev, isInView: true }));\n          observerRef.current?.disconnect();\n        }\n      },\n      { threshold, rootMargin }\n    );\n    observerRef.current.observe(imgRef.current);\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [eager, threshold, rootMargin]);\n  useEffect(() => {\n    if (!imgRef.current) return;\n    const handleLoad = () => {\n      setState((prev) => ({ ...prev, isLoaded: true }));\n    };\n    const img = imgRef.current;\n    if (img.complete) {\n      handleLoad();\n    } else {\n      img.addEventListener(\"load\", handleLoad);\n      return () => img.removeEventListener(\"load\", handleLoad);\n    }\n  }, [state.isInView]);\n  const ref = useCallback((node) => {\n    imgRef.current = node;\n  }, []);\n  const emptySrcset = { avif: \"\", webp: \"\", jpeg: \"\" };\n  return {\n    ref,\n    // Primary src uses exact rendered dimensions for Lighthouse \"Properly size images\" compliance\n    src: state.isInView || eager ? primarySrc : \"\",\n    // Srcset with format variants and DPR multipliers for <picture> element\n    srcset: state.isInView || eager ? srcset : emptySrcset,\n    // Sizes attribute for responsive image selection\n    sizes: state.isInView || eager ? sizes : \"\",\n    isLoaded: state.isLoaded,\n    isInView: state.isInView,\n    loading: eager ? \"eager\" : \"lazy\",\n    size\n  };\n}\n\nexport { useOptimizedImage };\n//# sourceMappingURL=chunk-N6IWQITG.js.map\n//# sourceMappingURL=chunk-N6IWQITG.js.map","// Lightweight multi-level cache inspired by ecosystem guidelines\n// L1 (instance) will be handled in components via refs/state; this is L2 (module-level) cache\n\nconst l2Cache = new Map<string, any>();\n\nexport function cacheGet<T>(key: string): T | undefined {\n  return l2Cache.get(key) as T | undefined;\n}\n\nexport function cacheSet<T>(key: string, value: T) {\n  l2Cache.set(key, value);\n}\n\nexport function cacheHas(key: string) {\n  return l2Cache.has(key);\n}\n\n","import { cacheGet, cacheSet } from './cache.js';\nimport type { ImageData, ImageVariantsMap, ProgressiveSizes } from '../types.js';\n\nexport type FetchImageOptions = {\n  cdnHost?: string; // default: https://cdn.ing\n  signal?: AbortSignal;\n  bypassCache?: boolean;\n};\n\nexport const DEFAULT_CDN_HOST = 'https://cdn.ing';\n\nfunction normalizeHost(cdnHost?: string): string {\n  return (cdnHost ?? DEFAULT_CDN_HOST).replace(/\\/$/, '');\n}\n\nfunction buildPrimaryImageUrl(mediaId: number, cdnHost?: string): string {\n  const host = normalizeHost(cdnHost);\n  return `${host}/assets/images/${mediaId}`;\n}\n\nfunction buildLegacyImageUrl(mediaId: number, cdnHost?: string): string {\n  const host = normalizeHost(cdnHost);\n  return `${host}/i/r/${mediaId}`;\n}\n\nexport function buildPlaceholderImageUrl(mediaId: number, cdnHost?: string): string {\n  const host = normalizeHost(cdnHost);\n  return `${host}/assets/low_res_thumb/${mediaId}`;\n}\n\nfunction hasRenderableUrlVariant(variant?: ProgressiveSizes | null): boolean {\n  if (!variant) return false;\n  const candidates = [variant.sm, variant.md, variant.lg, variant.full];\n  return candidates.some((value) => typeof value === 'string' && value.trim().length > 0);\n}\n\nexport function imageVariantsHaveRenderableSource(variants?: ImageVariantsMap | null): boolean {\n  if (!variants) return false;\n  return ['AVIF', 'WEBP', 'JPEG'].some((format) => {\n    const entry = variants?.[format as keyof ImageVariantsMap] as ProgressiveSizes | undefined;\n    return hasRenderableUrlVariant(entry);\n  });\n}\n\nfunction hasUrlValue(value: unknown): value is string {\n  return typeof value === 'string' && value.trim().length > 0;\n}\n\nexport function imageDataHasRenderableSource(data: ImageData): boolean {\n  if (!data) return false;\n  if (imageVariantsHaveRenderableSource(data.variants_data?.variants ?? null)) {\n    return true;\n  }\n  const raw = data as any;\n  const directFields = [\n    raw.img_url,\n    raw.file_data_url,\n    raw.file_data_thumbnail_url,\n    raw.img_src,\n    raw.med_src,\n    raw.thumb_src,\n    raw.low_res_thumb,\n  ];\n  return directFields.some(hasUrlValue);\n}\n\nasync function fetchFrom(url: string, signal?: AbortSignal): Promise<ImageData> {\n  const res = await fetch(url, { signal });\n  if (!res.ok) {\n    const error = new Error(`Failed to fetch image data (status ${res.status}) from ${url}`);\n    (error as any).status = res.status;\n    throw error;\n  }\n  return (await res.json()) as ImageData;\n}\n\nexport async function fetchImageData(\n  mediaId: number,\n  options: FetchImageOptions = {}\n): Promise<ImageData> {\n  if (!Number.isFinite(mediaId)) {\n    throw new Error('Invalid mediaId provided to fetchImageData');\n  }\n\n  const host = normalizeHost(options.cdnHost);\n  const cacheKey = `image:${host}:${mediaId}`;\n  if (!options.bypassCache) {\n    const cached = cacheGet<ImageData>(cacheKey);\n    if (cached) return cached;\n  }\n\n  const urls = [buildPrimaryImageUrl(mediaId, host), buildLegacyImageUrl(mediaId, host)];\n  let lastError: unknown;\n\n  for (const url of urls) {\n    try {\n      const data = await fetchFrom(url, options.signal);\n      if (imageDataHasRenderableSource(data)) {\n        cacheSet(cacheKey, data);\n      }\n      return data;\n    } catch (err) {\n      if ((err as any)?.name === 'AbortError') {\n        throw err;\n      }\n      lastError = err;\n    }\n  }\n\n  if (lastError instanceof Error) {\n    throw lastError;\n  }\n  throw new Error(`Failed to fetch image data for mediaId ${mediaId}`);\n}\n","import { useEffect } from 'react';\n\nconst MEDIA_SELECTED_EVENT = 'dt:media-selected';\n\nexport function sendMediaSelection(blockId: string, payload: unknown) {\n  if (typeof window === 'undefined') return;\n  window.dispatchEvent(\n    new CustomEvent(MEDIA_SELECTED_EVENT, {\n      detail: { blockId, payload },\n    })\n  );\n}\n\nexport function useMediaSelectionEffect() {\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const handler = () => {\n      // no-op: the real handler is attached in the builder via addEventListener\n    };\n    window.addEventListener(MEDIA_SELECTED_EVENT, handler);\n    return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);\n  }, []);\n}\n\n","import { useEffect } from 'react';\n\nexport function resetResponsivePictureState(element: HTMLPictureElement | null) {\n  if (!element) return;\n  element.querySelectorAll('source').forEach((source) => {\n    // force browser to reconsider responsive sources\n    const srcset = source.getAttribute('srcset');\n    if (srcset) {\n      source.setAttribute('data-srcset', srcset);\n      source.removeAttribute('srcset');\n      requestAnimationFrame(() => {\n        source.setAttribute('srcset', srcset);\n      });\n    }\n  });\n}\n\nexport function useResponsiveReset(ref: React.RefObject<HTMLPictureElement | HTMLImageElement>) {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    if (element instanceof HTMLPictureElement) {\n      resetResponsivePictureState(element);\n    } else if (element.parentElement instanceof HTMLPictureElement) {\n      resetResponsivePictureState(element.parentElement);\n    }\n  }, [ref]);\n}\n\n","\"use client\";\n\nimport React, {\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useOptimizedImage } from '@page-speed/hooks';\nimport type { OptixFlowConfig, ImageData, ProgressiveSizes } from '../types.js';\nimport {\n  DEFAULT_CDN_HOST,\n  buildPlaceholderImageUrl,\n  fetchImageData,\n  imageVariantsHaveRenderableSource,\n} from '../utils/api.js';\nimport { useMediaSelectionEffect } from './useMediaSelectionEffect.js';\nimport { useResponsiveReset } from './useResponsiveReset.js';\n\ntype NativeImgProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'sizes'> & {\n  src?: string;\n};\n\nexport type ImgProps = NativeImgProps & {\n  /** Legacy CDN media id support (deprecated) */\n  mediaId?: number;\n  /** Override CDN host for legacy mediaId usage */\n  cdnHost?: string;\n  /** Explicit sizes attribute (otherwise derived from useOptimizedImage) */\n  sizes?: string;\n  /** Callback when legacy mediaId payload is retrieved */\n  onImageData?: (data: ImageData) => void;\n  /** Force eager load (alias for loading=\"eager\") */\n  eager?: boolean;\n  /** Intersection observer threshold for lazy loading */\n  intersectionThreshold?: number;\n  /** Intersection observer root margin for lazy loading */\n  intersectionMargin?: string;\n  /** OptixFlow integration options */\n  optixFlowConfig?: OptixFlowConfig;\n};\n\ntype ForwardedImgProps = ImgProps & { forwardedRef: React.Ref<HTMLImageElement | null> };\n\nconst DEFAULT_WIDTHS = {\n  sm: 640,\n  md: 1024,\n  lg: 1536,\n  full: 2560,\n} as const;\n\nconst MAX_VARIANT_REFRESH_ATTEMPTS = 5;\nconst VARIANT_REFRESH_DELAY_MS = 3000;\nconst TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';\n\nlet defaultOptixFlowConfig: OptixFlowConfig | undefined;\nconst deprecatedMediaWarnings = new Set<number>();\n\nconst readGlobalOptixFlowConfig = (): OptixFlowConfig | undefined => {\n  if (typeof globalThis === 'undefined') return undefined;\n  const globalAny = globalThis as any;\n  return (\n    globalAny.PageSpeedImgDefaults?.optixFlowConfig ||\n    globalAny.OpensiteImgDefaults?.optixFlowConfig ||\n    globalAny.PAGE_SPEED_IMG_DEFAULTS?.optixFlowConfig\n  );\n};\n\nconst resolveOptixFlowConfig = (config?: OptixFlowConfig): OptixFlowConfig | undefined => {\n  return config ?? defaultOptixFlowConfig ?? readGlobalOptixFlowConfig();\n};\n\nexport const setDefaultOptixFlowConfig = (config?: OptixFlowConfig | null) => {\n  defaultOptixFlowConfig = config ?? undefined;\n};\n\nconst warnDeprecatedMediaId = (mediaId?: number) => {\n  if (!Number.isFinite(mediaId) || mediaId == null) return;\n  const id = mediaId as number;\n  if (deprecatedMediaWarnings.has(id)) return;\n  deprecatedMediaWarnings.add(id);\n  if (typeof console !== 'undefined' && console.warn) {\n    console.warn('[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.', { mediaId: id });\n  }\n};\n\nconst isUrlString = (value: unknown): value is string => typeof value === 'string' && value.trim().length > 0;\n\nconst parseDimension = (value: unknown): number | undefined => {\n  if (typeof value === 'number' && Number.isFinite(value)) return value;\n  if (typeof value === 'string') {\n    const numeric = Number(value);\n    if (Number.isFinite(numeric)) return numeric;\n  }\n  return undefined;\n};\n\nconst composeRefs = (\n  hookRef: (node: HTMLImageElement | null) => void,\n  forwardedRef: React.Ref<HTMLImageElement | null>,\n  localRef: React.RefObject<HTMLImageElement>,\n) =>\n  useCallback(\n    (node: HTMLImageElement | null) => {\n      hookRef(node);\n      // eslint-disable-next-line no-param-reassign\n      (localRef as any).current = node;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(node);\n      } else if (forwardedRef && typeof (forwardedRef as any) === 'object') {\n        (forwardedRef as any).current = node;\n      }\n    },\n    [hookRef, forwardedRef, localRef],\n  );\n\nfunction widthMapFromMetadata(v?: any): Record<'sm' | 'md' | 'lg' | 'full', number> | null {\n  const w = v?.widths as any;\n  if (!w) return null;\n  return {\n    sm: w.small ?? w.sm ?? DEFAULT_WIDTHS.sm,\n    md: w.medium ?? w.md ?? DEFAULT_WIDTHS.md,\n    lg: w.large ?? w.lg ?? DEFAULT_WIDTHS.lg,\n    full: w.full_size ?? w.full ?? DEFAULT_WIDTHS.full,\n  };\n}\n\nfunction pickBest(sizes: ProgressiveSizes | undefined): string | undefined {\n  if (!sizes) return undefined;\n  return sizes.md || sizes.lg || sizes.sm || sizes.full || Object.values(sizes).find(Boolean);\n}\n\nconst DEFAULT_SIZES = '(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px';\n\nconst ModernImg: React.FC<ForwardedImgProps> = ({\n  sizes,\n  loading,\n  decoding,\n  alt,\n  title,\n  src: directSrc,\n  eager,\n  intersectionMargin,\n  intersectionThreshold,\n  optixFlowConfig,\n  forwardedRef,\n  ...rest\n}) => {\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const pictureRef = useRef<HTMLPictureElement | null>(null);\n\n  useResponsiveReset(pictureRef);\n  useMediaSelectionEffect();\n\n  const normalizedSrc = useMemo(() => (typeof directSrc === 'string' ? directSrc.trim() : ''), [directSrc]);\n  const numericWidth = useMemo(() => parseDimension((rest as any).width), [rest]);\n  const numericHeight = useMemo(() => parseDimension((rest as any).height), [rest]);\n  const resolvedOptixConfig = useMemo(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);\n  const eagerLoad = eager ?? loading === 'eager';\n\n  const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({\n    src: normalizedSrc,\n    eager: eagerLoad,\n    width: numericWidth,\n    height: numericHeight,\n    rootMargin: intersectionMargin ?? '200px',\n    threshold: intersectionThreshold ?? 0.1,\n    optixFlowConfig: resolvedOptixConfig,\n  });\n\n  const mergedRef = composeRefs(hookRef, forwardedRef, imgRef);\n  const { width, height, ...restProps } = rest as Record<string, unknown>;\n  const sizesAttr = sizes ?? (computedSizes || undefined);\n  const loadingAttr = loading ?? hookLoading ?? 'lazy';\n  const decodingAttr = decoding ?? 'async';\n  const hasSrcSet = Boolean(srcset.avif || srcset.webp || srcset.jpeg);\n  const imgSrc = src || normalizedSrc || TRANSPARENT_PIXEL;\n  const inlineSrcSet = hasSrcSet && !srcset.avif && !srcset.webp ? srcset.jpeg : '';\n  const widthAttr = (width as any) ?? (size.width || numericWidth || undefined);\n  const heightAttr = (height as any) ?? (size.height || numericHeight || undefined);\n\n  if (!hasSrcSet) {\n    return (\n      <img\n        ref={mergedRef}\n        src={imgSrc}\n        loading={loadingAttr}\n        decoding={decodingAttr}\n        alt={alt}\n        title={title}\n        width={widthAttr}\n        height={heightAttr}\n        {...restProps}\n      />\n    );\n  }\n\n  return (\n    <picture ref={pictureRef}>\n      {srcset.avif ? <source type=\"image/avif\" srcSet={srcset.avif} sizes={sizesAttr} /> : null}\n      {srcset.webp ? <source type=\"image/webp\" srcSet={srcset.webp} sizes={sizesAttr} /> : null}\n      <img\n        ref={mergedRef}\n        src={imgSrc}\n        srcSet={inlineSrcSet || undefined}\n        sizes={inlineSrcSet ? sizesAttr : undefined}\n        loading={loadingAttr}\n        decoding={decodingAttr}\n        alt={alt}\n        title={title}\n        width={widthAttr}\n        height={heightAttr}\n        {...restProps}\n      />\n    </picture>\n  );\n};\n\nconst LegacyImg: React.FC<ForwardedImgProps> = ({\n  mediaId,\n  cdnHost,\n  sizes,\n  onImageData,\n  loading,\n  decoding,\n  alt,\n  title,\n  src: directSrc,\n  forwardedRef,\n  ...rest\n}) => {\n  const imgRef = useRef<HTMLImageElement>(null);\n  const pictureRef = useRef<HTMLPictureElement | null>(null);\n  useImperativeHandle(forwardedRef, () => imgRef.current);\n  useResponsiveReset(pictureRef);\n  useMediaSelectionEffect();\n\n  const [data, setData] = useState<ImageData | null>(null);\n  const [retryCount, setRetryCount] = useState(0);\n  const hasMediaId = Number.isFinite(mediaId as number);\n  const loadingAttr = loading ?? 'lazy';\n  const decodingAttr = decoding ?? 'async';\n  const [isInView, setIsInView] = useState(() => !hasMediaId || loadingAttr !== 'lazy');\n  const cdnOrigin = useMemo(() => (cdnHost ?? DEFAULT_CDN_HOST).replace(/\\/$/, ''), [cdnHost]);\n\n  useEffect(() => {\n    if (!hasMediaId) {\n      setData(null);\n      setRetryCount(0);\n      return;\n    }\n    setData(null);\n    setRetryCount(0);\n  }, [hasMediaId, mediaId, cdnHost]);\n\n  useEffect(() => {\n    if (!hasMediaId) {\n      return;\n    }\n    const controller = new AbortController();\n    fetchImageData(mediaId as number, {\n      cdnHost,\n      signal: controller.signal,\n      bypassCache: retryCount > 0,\n    })\n      .then((d) => {\n        setData(d);\n        onImageData?.(d);\n      })\n      .catch((err) => {\n        if (err?.name !== 'AbortError') {\n          // eslint-disable-next-line no-console\n          console.warn('Image data fetch failed:', err);\n        }\n      });\n    return () => controller.abort();\n  }, [hasMediaId, mediaId, cdnHost, onImageData, retryCount]);\n\n  useEffect(() => {\n    if (!hasMediaId || loadingAttr !== 'lazy') {\n      setIsInView(true);\n      return;\n    }\n    setIsInView(false);\n  }, [hasMediaId, mediaId, loadingAttr]);\n\n  useEffect(() => {\n    if (!hasMediaId || loadingAttr !== 'lazy' || isInView) {\n      return;\n    }\n    if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {\n      setIsInView(true);\n      return;\n    }\n    const node = imgRef.current;\n    if (!node) {\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setIsInView(true);\n        observer.disconnect();\n      }\n    }, { rootMargin: '200px' });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [hasMediaId, loadingAttr, isInView]);\n\n  // Build picture/source/srcset from variants\n  const picture = useMemo(() => {\n    if (!data) return null;\n    const v = data.variants_data?.variants ?? {};\n    const webp = (v as any).WEBP as ProgressiveSizes | undefined;\n    const avif = (v as any).AVIF as ProgressiveSizes | undefined;\n    const jpeg = (v as any).JPEG as ProgressiveSizes | undefined;\n\n    const widths =\n      widthMapFromMetadata((v as any).WEBP?.metadata) ||\n      widthMapFromMetadata((v as any).JPEG?.metadata) ||\n      { ...DEFAULT_WIDTHS };\n\n    const ensureAbsolute = (url?: string) => {\n      if (!isUrlString(url)) return undefined;\n      if (/^https?:\\/\\//i.test(url) || url.startsWith('data:')) return url;\n      if (url.startsWith('//')) return `https:${url}`;\n      if (url.startsWith('/')) return `${cdnOrigin}${url}`;\n      return `${cdnOrigin}/${url}`;\n    };\n\n    const normalizeCandidate = (candidate?: string | null) =>\n      ensureAbsolute(typeof candidate === 'string' ? candidate : undefined);\n\n    const variantCandidates = [\n      pickBest(webp),\n      pickBest(jpeg),\n      pickBest(avif),\n      webp?.sm,\n      webp?.md,\n      webp?.lg,\n      webp?.full,\n      jpeg?.sm,\n      jpeg?.md,\n      jpeg?.lg,\n      jpeg?.full,\n      avif?.sm,\n      avif?.md,\n      avif?.lg,\n      avif?.full,\n    ]\n      .map((candidate) => normalizeCandidate(candidate ?? undefined))\n      .filter(isUrlString);\n\n    const raw = data as any;\n    const directCandidates = [\n      raw.img_url,\n      raw.file_data_url,\n      raw.file_data_thumbnail_url,\n      raw.img_src,\n      raw.med_src,\n      raw.thumb_src,\n      raw.low_res_thumb,\n    ]\n      .map((candidate) => (isUrlString(candidate) ? normalizeCandidate(candidate) : undefined))\n      .filter(isUrlString);\n\n    // Add fallback_url as the final option if no variants or direct candidates\n    const fallbackCandidates = raw.fallback_url ? [normalizeCandidate(raw.fallback_url)].filter(isUrlString) : [];\n\n    const fallback = [...variantCandidates, ...directCandidates, ...fallbackCandidates][0];\n\n    if (!fallback) {\n      return null;\n    }\n\n    const toSrcSet = (sizes?: ProgressiveSizes) => {\n      if (!sizes) return undefined;\n      const entries: string[] = [];\n      const push = (url?: string, width?: number) => {\n        const absolute = normalizeCandidate(url);\n        if (absolute && width) entries.push(`${absolute} ${width}w`);\n      };\n      push(sizes.sm, widths.sm);\n      push(sizes.md, widths.md);\n      push(sizes.lg, widths.lg);\n      push(sizes.full, widths.full);\n      return entries.length ? entries.join(', ') : undefined;\n    };\n\n    return { webp, avif, jpeg, toSrcSet, fallback, widths, hasVariantSource: variantCandidates.length > 0 } as const;\n  }, [data, cdnOrigin]);\n\n  const hasVariantEntries = useMemo(\n    () => imageVariantsHaveRenderableSource(data?.variants_data?.variants ?? null),\n    [data],\n  );\n\n  const variantsStatus = useMemo(() => {\n    const status = (data?.variants_data?.status ?? data?.variants_status) ?? '';\n    return typeof status === 'string' ? status.toLowerCase() : '';\n  }, [data]);\n\n  const variantsFailed = variantsStatus === 'failed' || variantsStatus === 'error';\n\n  const shouldPollForVariants =\n    hasMediaId && Boolean(data) && !variantsFailed && !hasVariantEntries && retryCount < MAX_VARIANT_REFRESH_ATTEMPTS;\n\n  useEffect(() => {\n    if (!shouldPollForVariants) {\n      return;\n    }\n    if (typeof window === 'undefined') {\n      return;\n    }\n    const timeoutId = window.setTimeout(() => {\n      setRetryCount((count) => count + 1);\n    }, VARIANT_REFRESH_DELAY_MS);\n    return () => window.clearTimeout(timeoutId);\n  }, [shouldPollForVariants]);\n\n  // Map HTML attributes from content manifest and sizing\n  const altAttr = useMemo(() => {\n    if (typeof alt === 'string') return alt;\n    return (data?.meta as any)?.content_manifest?.summary ?? undefined;\n  }, [alt, data]);\n\n  const titleAttr = useMemo(() => {\n    if (typeof title === 'string') return title;\n    return (data?.meta as any)?.content_manifest?.title ?? undefined;\n  }, [title, data]);\n\n  const widthAttr = useMemo(() => data?.meta?.sizing?.width ?? data?.variants_data?.metadata?.width ?? undefined, [data]);\n  const heightAttr = useMemo(\n    () => data?.meta?.sizing?.height ?? data?.variants_data?.metadata?.height ?? undefined,\n    [data],\n  );\n\n  // Compute data-filename for consumers that need semantic filenames\n  const dataFilename = useMemo(() => {\n    const base = (data?.meta as any)?.content_manifest?.optimized_filename as string | undefined;\n    if (!base) return undefined;\n    // ext derived from chosen fallback url\n    const href = picture?.fallback;\n    if (!href) return undefined;\n    const dot = href.lastIndexOf('.');\n    const ext = dot > -1 ? href.slice(dot + 1).toLowerCase() : 'jpg';\n    return `${base}.${ext}`;\n  }, [data, picture]);\n\n  // If mediaId not provided but src is, render plain img\n  if (!hasMediaId) {\n    const r: any = { ...rest };\n    return (\n      <img\n        ref={imgRef}\n        src={directSrc}\n        loading={loadingAttr}\n        decoding={decodingAttr}\n        alt={altAttr}\n        title={titleAttr}\n        width={r.width}\n        height={r.height}\n        {...r}\n      />\n    );\n  }\n\n  const placeholderSrc = buildPlaceholderImageUrl(mediaId as number, cdnHost);\n\n  if (!data || !picture || !isInView) {\n    const r: any = { ...rest };\n    return (\n      <img\n        ref={imgRef}\n        src={placeholderSrc}\n        loading={loadingAttr}\n        decoding={decodingAttr}\n        alt={altAttr}\n        title={titleAttr}\n        width={r.width ?? widthAttr}\n        height={r.height ?? heightAttr}\n        {...r}\n      />\n    );\n  }\n\n  const sizesAttr = sizes ?? DEFAULT_SIZES;\n  const { webp, avif, jpeg, toSrcSet, fallback } = picture;\n\n  const webpSet = toSrcSet(webp);\n  const avifSet = toSrcSet(avif);\n  const jpegSet = toSrcSet(jpeg);\n\n  if (webpSet || avifSet || jpegSet) {\n    return (\n      <picture>\n        {avifSet ? <source type=\"image/avif\" srcSet={avifSet} sizes={sizesAttr} /> : null}\n        {webpSet ? <source type=\"image/webp\" srcSet={webpSet} sizes={sizesAttr} /> : null}\n        <img\n          ref={imgRef}\n          src={fallback}\n          srcSet={jpegSet && !webpSet && !avifSet ? jpegSet : undefined}\n          sizes={jpegSet && !webpSet && !avifSet ? sizesAttr : undefined}\n          loading={loadingAttr}\n          decoding={decodingAttr}\n          alt={altAttr}\n          title={titleAttr}\n          width={widthAttr}\n          height={heightAttr}\n          data-filename={dataFilename}\n          {...rest}\n        />\n      </picture>\n    );\n  }\n\n  return (\n    <img\n      ref={imgRef}\n      src={fallback}\n      loading={loadingAttr}\n      decoding={decodingAttr}\n      alt={altAttr}\n      title={titleAttr}\n      width={widthAttr}\n      height={heightAttr}\n      data-filename={dataFilename}\n      {...rest}\n    />\n  );\n};\n\nconst ImgBase = forwardRef<HTMLImageElement, ImgProps>(function Img(props, ref) {\n  const hasMediaId = Number.isFinite(props.mediaId as number);\n\n  if (hasMediaId) {\n    warnDeprecatedMediaId(props.mediaId);\n    return <LegacyImg {...props} forwardedRef={ref} />;\n  }\n\n  const hasSrc = typeof props.src === 'string' && props.src.trim().length > 0;\n  if (!hasSrc) {\n    if (typeof console !== 'undefined' && console.warn) {\n      console.warn('<Img /> requires either src or mediaId. No src provided, rendering null.');\n    }\n    return null;\n  }\n\n  return <ModernImg {...props} forwardedRef={ref} />;\n});\n\nexport const Img = memo(ImgBase);\nImg.displayName = 'PageSpeedImg';\n","// Ensure process.env exists when the module is loaded directly in the browser UMD build.\ntype GlobalWithProcess = typeof globalThis & { process?: NodeJS.Process };\n\nconst globalObject =\n  typeof globalThis !== 'undefined' ? (globalThis as GlobalWithProcess) : undefined;\n\nif (globalObject) {\n  if (!globalObject.process) {\n    globalObject.process = {\n      env: { NODE_ENV: 'production' } as NodeJS.ProcessEnv,\n    } as NodeJS.Process;\n  } else {\n    const env = globalObject.process.env ?? (globalObject.process.env = {} as NodeJS.ProcessEnv);\n    if (typeof env.NODE_ENV === 'undefined') {\n      env.NODE_ENV = 'production';\n    }\n  }\n}\n\nexport * from './core/index.js';\nexport * from './types.js';\n"],"names":["DPR_MULTIPLIERS","l2Cache","Map","cacheSet","key","value","set","DEFAULT_CDN_HOST","normalizeHost","cdnHost","replace","buildPrimaryImageUrl","mediaId","buildLegacyImageUrl","imageVariantsHaveRenderableSource","variants","some","format","entry","variant","sm","md","lg","full","trim","length","hasUrlValue","imageDataHasRenderableSource","data","_a","variants_data","raw","img_url","file_data_url","file_data_thumbnail_url","img_src","med_src","thumb_src","low_res_thumb","async","fetchFrom","url","signal","res","fetch","ok","error","Error","status","json","fetchImageData","options","Number","isFinite","host","cacheKey","bypassCache","cached","get","urls","lastError","err","name","MEDIA_SELECTED_EVENT","useMediaSelectionEffect","useEffect","window","handler","addEventListener","removeEventListener","resetResponsivePictureState","element","querySelectorAll","forEach","source","srcset","getAttribute","setAttribute","removeAttribute","requestAnimationFrame","useResponsiveReset","ref","current","HTMLPictureElement","parentElement","DEFAULT_WIDTHS","defaultOptixFlowConfig","deprecatedMediaWarnings","Set","resolveOptixFlowConfig","config","globalThis","globalAny","PageSpeedImgDefaults","optixFlowConfig","_b","OpensiteImgDefaults","_c","PAGE_SPEED_IMG_DEFAULTS","readGlobalOptixFlowConfig","isUrlString","parseDimension","numeric","widthMapFromMetadata","v","w","widths","small","medium","large","full_size","pickBest","sizes","Object","values","find","Boolean","ModernImg","loading","decoding","alt","title","src","directSrc","eager","intersectionMargin","intersectionThreshold","forwardedRef","rest","imgRef","useRef","pictureRef","normalizedSrc","useMemo","numericWidth","width","numericHeight","height","resolvedOptixConfig","eagerLoad","hookRef","computedSizes","hookLoading","size","threshold","rootMargin","optixFlowApiKey","apiKey","useOptixFlow","state","setState","useState","isLoaded","isInView","setSize","observerRef","prev","calculateRenderedSize","img2","renderedWidth","Math","round","clientWidth","naturalWidth","renderedHeight","clientHeight","naturalHeight","img","resizeObserver","ResizeObserver","observe","disconnect","buildOptixFlowUrl","useCallback","imgWidth","imgHeight","params","URLSearchParams","String","compressionLevel","toString","generateSrcset","baseWidth","baseHeight","map","dpr","scaledWidth","scaledHeight","join","primarySrc","fallbackFormat","renderedFileType","avif","webp","jpeg","IntersectionObserver","isIntersecting","handleLoad","complete","node","useOptimizedImage","mergedRef","localRef","composeRefs","restProps","sizesAttr","loadingAttr","decodingAttr","hasSrcSet","imgSrc","inlineSrcSet","widthAttr","heightAttr","createElement","React","type","srcSet","LegacyImg","onImageData","useImperativeHandle","setData","retryCount","setRetryCount","hasMediaId","setIsInView","cdnOrigin","controller","AbortController","then","d","catch","console","warn","abort","observer","entries","picture","WEBP","AVIF","JPEG","metadata","normalizeCandidate","candidate","test","startsWith","ensureAbsolute","variantCandidates","filter","directCandidates","fallbackCandidates","fallback_url","fallback","toSrcSet","push","absolute","hasVariantSource","hasVariantEntries","variantsStatus","variants_status","toLowerCase","variantsFailed","shouldPollForVariants","timeoutId","setTimeout","count","clearTimeout","altAttr","meta","content_manifest","summary","titleAttr","sizing","_d","dataFilename","base","optimized_filename","href","dot","lastIndexOf","slice","r","placeholderSrc","buildPlaceholderImageUrl","webpSet","avifSet","jpegSet","ImgBase","forwardRef","props","id","has","add","warnDeprecatedMediaId","Img","memo","displayName","globalObject","process","env","NODE_ENV"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/core/Img.cjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+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';
@@ -12,7 +13,56 @@ const DEFAULT_WIDTHS = {
 };
 const MAX_VARIANT_REFRESH_ATTEMPTS = 5;
 const VARIANT_REFRESH_DELAY_MS = 3000;
+const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+let defaultOptixFlowConfig;
+const deprecatedMediaWarnings = new Set();
+const readGlobalOptixFlowConfig = () => {
+    if (typeof globalThis === 'undefined')
+        return undefined;
+    const globalAny = globalThis;
+    return (globalAny.PageSpeedImgDefaults?.optixFlowConfig ||
+        globalAny.OpensiteImgDefaults?.optixFlowConfig ||
+        globalAny.PAGE_SPEED_IMG_DEFAULTS?.optixFlowConfig);
+};
+const resolveOptixFlowConfig = (config) => {
+    return config ?? defaultOptixFlowConfig ?? readGlobalOptixFlowConfig();
+};
+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 (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const numeric = Number(value);
+        if (Number.isFinite(numeric))
+            return numeric;
+    }
+    return undefined;
+};
+const composeRefs = (hookRef, forwardedRef, localRef) => useCallback((node) => {
+    hookRef(node);
+    // eslint-disable-next-line no-param-reassign
+    localRef.current = node;
+    if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+    }
+    else if (forwardedRef && typeof forwardedRef === 'object') {
+        forwardedRef.current = node;
+    }
+}, [hookRef, forwardedRef, localRef]);
 function widthMapFromMetadata(v) {
     const w = v?.widths;
     if (!w)
@@ -30,10 +80,44 @@ function pickBest(sizes) {
     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 ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, ...rest }, ref) {
+const ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, intersectionMargin, intersectionThreshold, optixFlowConfig, forwardedRef, ...rest }) => {
+    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 resolvedOptixConfig = useMemo(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);
+    const eagerLoad = eager ?? loading === 'eager';
+    const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({
+        src: normalizedSrc,
+        eager: eagerLoad,
+        width: numericWidth,
+        height: numericHeight,
+        rootMargin: intersectionMargin ?? '200px',
+        threshold: intersectionThreshold ?? 0.1,
+        optixFlowConfig: resolvedOptixConfig,
+    });
+    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 widthAttr = width ?? (size.width || numericWidth || undefined);
+    const heightAttr = height ?? (size.height || numericHeight || undefined);
+    if (!hasSrcSet) {
+        return (_jsx("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, 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);
-    useImperativeHandle(ref, () => imgRef.current);
     const pictureRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => imgRef.current);
     useResponsiveReset(pictureRef);
     useMediaSelectionEffect();
     const [data, setData] = useState(null);
@@ -243,6 +327,21 @@ const ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData,
         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 }));
+};
+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;
+    if (!hasSrc) {
+        if (typeof console !== 'undefined' && console.warn) {
+            console.warn('<Img /> requires either src or mediaId. No src provided, rendering null.');
+        }
+        return null;
+    }
+    return _jsx(ModernImg, { ...props, forwardedRef: ref });
 });
 export const Img = memo(ImgBase);
-Img.displayName = 'OpenSiteImg';
+Img.displayName = 'PageSpeedImg';

package/dist/core/Img.d.ts

@@ -1,20 +1,45 @@
 import React from 'react';
-import type { ImageData } from '../types.js';
+import type { OptixFlowConfig, ImageData } from '../types.js';
 type NativeImgProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'sizes'> & {
     src?: string;
 };
 export type ImgProps = NativeImgProps & {
+    /** Legacy CDN media id support (deprecated) */
     mediaId?: number;
+    /** Override CDN host for legacy mediaId usage */
     cdnHost?: string;
+    /** Explicit sizes attribute (otherwise derived from useOptimizedImage) */
     sizes?: string;
+    /** Callback when legacy mediaId payload is retrieved */
     onImageData?: (data: ImageData) => void;
+    /** Force eager load (alias for loading="eager") */
+    eager?: boolean;
+    /** Intersection observer threshold for lazy loading */
+    intersectionThreshold?: number;
+    /** Intersection observer root margin for lazy loading */
+    intersectionMargin?: string;
+    /** OptixFlow integration options */
+    optixFlowConfig?: OptixFlowConfig;
 };
+export declare const setDefaultOptixFlowConfig: (config?: OptixFlowConfig | null) => void;
 export declare const Img: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "sizes"> & {
     src?: string;
 } & {
+    /** Legacy CDN media id support (deprecated) */
     mediaId?: number;
+    /** Override CDN host for legacy mediaId usage */
     cdnHost?: string;
+    /** Explicit sizes attribute (otherwise derived from useOptimizedImage) */
     sizes?: string;
+    /** Callback when legacy mediaId payload is retrieved */
     onImageData?: (data: ImageData) => void;
+    /** Force eager load (alias for loading="eager") */
+    eager?: boolean;
+    /** Intersection observer threshold for lazy loading */
+    intersectionThreshold?: number;
+    /** Intersection observer root margin for lazy loading */
+    intersectionMargin?: string;
+    /** OptixFlow integration options */
+    optixFlowConfig?: OptixFlowConfig;
 } & React.RefAttributes<HTMLImageElement>>>;
 export {};

package/dist/core/Img.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+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';
@@ -12,7 +13,56 @@ const DEFAULT_WIDTHS = {
 };
 const MAX_VARIANT_REFRESH_ATTEMPTS = 5;
 const VARIANT_REFRESH_DELAY_MS = 3000;
+const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+let defaultOptixFlowConfig;
+const deprecatedMediaWarnings = new Set();
+const readGlobalOptixFlowConfig = () => {
+    if (typeof globalThis === 'undefined')
+        return undefined;
+    const globalAny = globalThis;
+    return (globalAny.PageSpeedImgDefaults?.optixFlowConfig ||
+        globalAny.OpensiteImgDefaults?.optixFlowConfig ||
+        globalAny.PAGE_SPEED_IMG_DEFAULTS?.optixFlowConfig);
+};
+const resolveOptixFlowConfig = (config) => {
+    return config ?? defaultOptixFlowConfig ?? readGlobalOptixFlowConfig();
+};
+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 (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const numeric = Number(value);
+        if (Number.isFinite(numeric))
+            return numeric;
+    }
+    return undefined;
+};
+const composeRefs = (hookRef, forwardedRef, localRef) => useCallback((node) => {
+    hookRef(node);
+    // eslint-disable-next-line no-param-reassign
+    localRef.current = node;
+    if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+    }
+    else if (forwardedRef && typeof forwardedRef === 'object') {
+        forwardedRef.current = node;
+    }
+}, [hookRef, forwardedRef, localRef]);
 function widthMapFromMetadata(v) {
     const w = v?.widths;
     if (!w)
@@ -30,10 +80,44 @@ function pickBest(sizes) {
     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 ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, ...rest }, ref) {
+const ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, intersectionMargin, intersectionThreshold, optixFlowConfig, forwardedRef, ...rest }) => {
+    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 resolvedOptixConfig = useMemo(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);
+    const eagerLoad = eager ?? loading === 'eager';
+    const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({
+        src: normalizedSrc,
+        eager: eagerLoad,
+        width: numericWidth,
+        height: numericHeight,
+        rootMargin: intersectionMargin ?? '200px',
+        threshold: intersectionThreshold ?? 0.1,
+        optixFlowConfig: resolvedOptixConfig,
+    });
+    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 widthAttr = width ?? (size.width || numericWidth || undefined);
+    const heightAttr = height ?? (size.height || numericHeight || undefined);
+    if (!hasSrcSet) {
+        return (_jsx("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, 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);
-    useImperativeHandle(ref, () => imgRef.current);
     const pictureRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => imgRef.current);
     useResponsiveReset(pictureRef);
     useMediaSelectionEffect();
     const [data, setData] = useState(null);
@@ -243,6 +327,21 @@ const ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData,
         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 }));
+};
+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;
+    if (!hasSrc) {
+        if (typeof console !== 'undefined' && console.warn) {
+            console.warn('<Img /> requires either src or mediaId. No src provided, rendering null.');
+        }
+        return null;
+    }
+    return _jsx(ModernImg, { ...props, forwardedRef: ref });
 });
 export const Img = memo(ImgBase);
-Img.displayName = 'OpenSiteImg';
+Img.displayName = 'PageSpeedImg';

package/dist/core/index.cjs

@@ -1 +1 @@
-export { Img } from './Img.js';
+export { Img, setDefaultOptixFlowConfig } from './Img.js';

package/dist/core/index.d.ts

@@ -1 +1 @@
-export { Img } from './Img.js';
+export { Img, setDefaultOptixFlowConfig } from './Img.js';

package/dist/core/index.js

@@ -1 +1 @@
-export { Img } from './Img.js';
+export { Img, setDefaultOptixFlowConfig } from './Img.js';

package/dist/types.d.ts

@@ -1,3 +1,9 @@
+export type ImageFormat = 'avif' | 'webp' | 'jpeg' | 'png';
+export type OptixFlowConfig = {
+    apiKey: string;
+    compressionLevel?: number;
+    renderedFileType?: ImageFormat;
+};
 export type ProgressiveSizes = Partial<Record<'sm' | 'md' | 'lg' | 'full', string>>;
 export type ImageVariantsMap = Partial<Record<'AVIF' | 'WEBP' | 'JPEG', ProgressiveSizes & {
     metadata?: {

package/package.json

@@ -1,23 +1,15 @@
 {
   "name": "@page-speed/img",
-  "version": "0.0.1",
+  "version": "0.1.4",
   "description": "Performance-optimized React Image component. Drop-in image implementation of web.dev best practices with zero configuration.",
   "keywords": [
     "react",
     "hooks",
     "performance",
-    "web-vitals",
-    "core-web-vitals",
-    "LCP",
-    "CLS",
-    "INP",
-    "FCP",
-    "TTFB",
     "page-speed",
     "optimization",
     "lazy-load",
     "responsive-images",
-    "resource-hints",
     "web.dev",
     "lighthouse",
     "pagespeed",
@@ -33,7 +25,7 @@
     "url": "https://github.com/opensite-ai/page-speed-img/issues"
   },
   "author": "OpenSite AI (https://opensite.ai)",
-  "license": "MIT",
+  "license": "BSD 3",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",
@@ -98,7 +90,7 @@
     "@types/node": "^20.17.6"
   },
   "dependencies": {
-    "@page-speed/hooks": "0.1.3"
+    "@page-speed/hooks": "0.1.5"
   },
   "packageManager": "pnpm@10.24.0",
   "engines": {