@page-speed/img 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, OpenSite AI. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,19 @@
+![Page Speed React Img](https://github.com/user-attachments/assets/dadfdfb0-fe28-4e9c-9576-5c5213616d82)
+
+---
+
+# ⚡ @page-speed/img
+  
+**Performance-optimized React Image component**
+
+Drop-in Image implementation of [web.dev](https://web.dev) best practices with zero configuration.
+
+[![npm version](https://img.shields.io/npm/v/@page-speed/img?style=flat-square)](https://www.npmjs.com/package/@page-speed/hooks)
+[![npm downloads](https://img.shields.io/npm/dm/@page-speed/img?style=flat-square)](https://www.npmjs.com/package/@page-speed/hooks)
+[![License](https://img.shields.io/npm/l/@page-speed/img?style=flat-square)](./LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square)](./tsconfig.json)
+[![Tree-Shakeable](https://img.shields.io/badge/Tree%20Shakeable-Yes-brightgreen?style=flat-square)](#tree-shaking)
+
+[Documentation](#documentation) · [Quick Start](#quick-start) · [Hooks](#hooks) · [Examples](#examples) · [Contributing](./CONTRIBUTING.md)
+
+---

package/dist/browser/opensite-img.umd.cjs

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OpensiteImg={},t.React)}(this,function(t,e){"use strict";const n=new Map;function i(t,e){n.set(t,e)}const r="https://cdn.ing";function l(t){return(t??r).replace(/\/$/,"")}function o(t,e){return`${l(e)}/assets/images/${t}`}function s(t,e){return`${l(e)}/i/r/${t}`}function a(t){return!!t&&["AVIF","WEBP","JPEG"].some(e=>{const n=null==t?void 0:t[e];return!!(i=n)&&[i.sm,i.md,i.lg,i.full].some(t=>"string"==typeof t&&t.trim().length>0);var i})}function u(t){return"string"==typeof t&&t.trim().length>0}function d(t){var e;if(!t)return!1;if(a((null==(e=t.variants_data)?void 0:e.variants)??null))return!0;const n=t;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(u)}async function c(t,e){const n=await fetch(t,{signal:e});if(!n.ok){const e=new Error(`Failed to fetch image data (status ${n.status}) from ${t}`);throw e.status=n.status,e}return await n.json()}async function f(t,e={}){if(!Number.isFinite(t))throw new Error("Invalid mediaId provided to fetchImageData");const r=l(e.cdnHost),a=`image:${r}:${t}`;if(!e.bypassCache){const t=(u=a,n.get(u));if(t)return t}var u;const f=[o(t,r),s(t,r)];let m;for(const n of f)try{const t=await c(n,e.signal);return d(t)&&i(a,t),t}catch(v){if("AbortError"===(null==v?void 0:v.name))throw v;m=v}if(m instanceof Error)throw m;throw new Error(`Failed to fetch image data for mediaId ${t}`)}const m="dt:media-selected";function v(t){t&&t.querySelectorAll("source").forEach(t=>{const e=t.getAttribute("srcset");e&&(t.setAttribute("data-srcset",e),t.removeAttribute("srcset"),requestAnimationFrame(()=>{t.setAttribute("srcset",e)}))})}const g={sm:640,md:1024,lg:1536,full:2560},h=t=>"string"==typeof t&&t.trim().length>0;function p(t){const e=null==t?void 0:t.widths;return e?{sm:e.small??e.sm??g.sm,md:e.medium??e.md??g.md,lg:e.large??e.lg??g.lg,full:e.full_size??e.full??g.full}:null}function w(t){if(t)return t.md||t.lg||t.sm||t.full||Object.values(t).find(Boolean)}const _=e.forwardRef(function({mediaId:t,cdnHost:n,sizes:i,onImageData:o,loading:s,decoding:u,alt:d,title:c,src:_,...E},b){const y=e.useRef(null);e.useImperativeHandle(b,()=>y.current);!function(t){e.useEffect(()=>{const e=t.current;e&&(e instanceof HTMLPictureElement?v(e):e.parentElement instanceof HTMLPictureElement&&v(e.parentElement))},[t])}(e.useRef(null)),e.useEffect(()=>{if("undefined"==typeof window)return;const t=()=>{};return window.addEventListener(m,t),()=>window.removeEventListener(m,t)},[]);const[$,I]=e.useState(null),[S,M]=e.useState(0),x=Number.isFinite(t),z=s??"lazy",A=u??"async",[O,N]=e.useState(()=>!x||"lazy"!==z),P=e.useMemo(()=>(n??r).replace(/\/$/,""),[n]);e.useEffect(()=>{if(!x)return I(null),void M(0);I(null),M(0)},[x,t,n]),e.useEffect(()=>{if(!x)return;const e=new AbortController;return f(t,{cdnHost:n,signal:e.signal,bypassCache:S>0}).then(t=>{I(t),null==o||o(t)}).catch(t=>{"AbortError"!==(null==t?void 0:t.name)&&console.warn("Image data fetch failed:",t)}),()=>e.abort()},[x,t,n,o,S]),e.useEffect(()=>{N(!x||"lazy"!==z)},[x,t,z]),e.useEffect(()=>{if(!x||"lazy"!==z||O)return;if("undefined"==typeof window||void 0===window.IntersectionObserver)return void N(!0);const t=y.current;if(!t)return;const e=new IntersectionObserver(t=>{t.some(t=>t.isIntersecting)&&(N(!0),e.disconnect())},{rootMargin:"200px"});return e.observe(t),()=>e.disconnect()},[x,z,O]);const T=e.useMemo(()=>{var t,e,n;if(!$)return null;const i=(null==(t=$.variants_data)?void 0:t.variants)??{},r=i.WEBP,l=i.AVIF,o=i.JPEG,s=p(null==(e=i.WEBP)?void 0:e.metadata)||p(null==(n=i.JPEG)?void 0:n.metadata)||{...g},a=t=>(t=>{if(h(t))return/^https?:\/\//i.test(t)||t.startsWith("data:")?t:t.startsWith("//")?`https:${t}`:t.startsWith("/")?`${P}${t}`:`${P}/${t}`})("string"==typeof t?t:void 0),u=[w(r),w(o),w(l),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==o?void 0:o.sm,null==o?void 0:o.md,null==o?void 0:o.lg,null==o?void 0:o.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].map(t=>a(t??void 0)).filter(h),d=$,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(t=>h(t)?a(t):void 0).filter(h),f=d.fallback_url?[a(d.fallback_url)].filter(h):[],m=[...u,...c,...f][0];if(!m)return null;return{webp:r,avif:l,jpeg:o,toSrcSet:t=>{if(!t)return;const e=[],n=(t,n)=>{const i=a(t);i&&n&&e.push(`${i} ${n}w`)};return n(t.sm,s.sm),n(t.md,s.md),n(t.lg,s.lg),n(t.full,s.full),e.length?e.join(", "):void 0},fallback:m,widths:s,hasVariantSource:u.length>0}},[$,P]),j=e.useMemo(()=>{var t;return a((null==(t=null==$?void 0:$.variants_data)?void 0:t.variants)??null)},[$]),F=e.useMemo(()=>{var t;const e=(null==(t=null==$?void 0:$.variants_data)?void 0:t.status)??(null==$?void 0:$.variants_status)??"";return"string"==typeof e?e.toLowerCase():""},[$]),k="failed"===F||"error"===F,H=x&&Boolean($)&&!k&&!j&&S<5;e.useEffect(()=>{if(!H)return;if("undefined"==typeof window)return;const t=window.setTimeout(()=>{M(t=>t+1)},3e3);return()=>window.clearTimeout(t)},[H]);const L=e.useMemo(()=>{var t,e;return"string"==typeof d?d:(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.summary)??void 0},[d,$]),V=e.useMemo(()=>{var t,e;return"string"==typeof c?c:(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.title)??void 0},[c,$]),W=e.useMemo(()=>{var t,e,n,i;return(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.sizing)?void 0:e.width)??(null==(i=null==(n=null==$?void 0:$.variants_data)?void 0:n.metadata)?void 0:i.width)??void 0},[$]),B=e.useMemo(()=>{var t,e,n,i;return(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.sizing)?void 0:e.height)??(null==(i=null==(n=null==$?void 0:$.variants_data)?void 0:n.metadata)?void 0:i.height)??void 0},[$]),C=e.useMemo(()=>{var t,e;const n=null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.optimized_filename;if(!n)return;const i=null==T?void 0:T.fallback;if(!i)return;const r=i.lastIndexOf(".");return`${n}.${r>-1?i.slice(r+1).toLowerCase():"jpg"}`},[$,T]);if(!x){const t={...E};return e.createElement("img",{ref:y,src:_,loading:z,decoding:A,alt:L,title:V,width:t.width,height:t.height,...t})}const D=function(t,e){return`${l(e)}/assets/low_res_thumb/${t}`}(t,n);if(!$||!T||!O){const t={...E};return e.createElement("img",{ref:y,src:D,loading:z,decoding:A,alt:L,title:V,width:t.width??W,height:t.height??B,...t})}const R=i??"(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px",{webp:q,avif:G,jpeg:J,toSrcSet:K,fallback:Q}=T,U=K(q),X=K(G),Y=K(J);return U||X||Y?e.createElement("picture",null,X?e.createElement("source",{type:"image/avif",srcSet:X,sizes:R}):null,U?e.createElement("source",{type:"image/webp",srcSet:U,sizes:R}):null,e.createElement("img",{ref:y,src:Q,srcSet:!Y||U||X?void 0:Y,sizes:!Y||U||X?void 0:R,loading:z,decoding:A,alt:L,title:V,width:W,height:B,"data-filename":C,...E})):e.createElement("img",{ref:y,src:Q,loading:z,decoding:A,alt:L,title:V,width:W,height:B,"data-filename":C,...E})}),E=e.memo(_);E.displayName="OpenSiteImg";const b="undefined"!=typeof globalThis?globalThis:void 0;if(b)if(b.process){const t=b.process.env??(b.process.env={});void 0===t.NODE_ENV&&(t.NODE_ENV="production")}else b.process={env:{NODE_ENV:"production"}};t.Img=E,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=opensite-img.umd.js.map

package/dist/browser/opensite-img.umd.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OpensiteImg={},t.React)}(this,function(t,e){"use strict";const n=new Map;function i(t,e){n.set(t,e)}const r="https://cdn.ing";function l(t){return(t??r).replace(/\/$/,"")}function o(t,e){return`${l(e)}/assets/images/${t}`}function s(t,e){return`${l(e)}/i/r/${t}`}function a(t){return!!t&&["AVIF","WEBP","JPEG"].some(e=>{const n=null==t?void 0:t[e];return!!(i=n)&&[i.sm,i.md,i.lg,i.full].some(t=>"string"==typeof t&&t.trim().length>0);var i})}function u(t){return"string"==typeof t&&t.trim().length>0}function d(t){var e;if(!t)return!1;if(a((null==(e=t.variants_data)?void 0:e.variants)??null))return!0;const n=t;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(u)}async function c(t,e){const n=await fetch(t,{signal:e});if(!n.ok){const e=new Error(`Failed to fetch image data (status ${n.status}) from ${t}`);throw e.status=n.status,e}return await n.json()}async function f(t,e={}){if(!Number.isFinite(t))throw new Error("Invalid mediaId provided to fetchImageData");const r=l(e.cdnHost),a=`image:${r}:${t}`;if(!e.bypassCache){const t=(u=a,n.get(u));if(t)return t}var u;const f=[o(t,r),s(t,r)];let m;for(const n of f)try{const t=await c(n,e.signal);return d(t)&&i(a,t),t}catch(v){if("AbortError"===(null==v?void 0:v.name))throw v;m=v}if(m instanceof Error)throw m;throw new Error(`Failed to fetch image data for mediaId ${t}`)}const m="dt:media-selected";function v(t){t&&t.querySelectorAll("source").forEach(t=>{const e=t.getAttribute("srcset");e&&(t.setAttribute("data-srcset",e),t.removeAttribute("srcset"),requestAnimationFrame(()=>{t.setAttribute("srcset",e)}))})}const g={sm:640,md:1024,lg:1536,full:2560},h=t=>"string"==typeof t&&t.trim().length>0;function p(t){const e=null==t?void 0:t.widths;return e?{sm:e.small??e.sm??g.sm,md:e.medium??e.md??g.md,lg:e.large??e.lg??g.lg,full:e.full_size??e.full??g.full}:null}function w(t){if(t)return t.md||t.lg||t.sm||t.full||Object.values(t).find(Boolean)}const _=e.forwardRef(function({mediaId:t,cdnHost:n,sizes:i,onImageData:o,loading:s,decoding:u,alt:d,title:c,src:_,...E},b){const y=e.useRef(null);e.useImperativeHandle(b,()=>y.current);!function(t){e.useEffect(()=>{const e=t.current;e&&(e instanceof HTMLPictureElement?v(e):e.parentElement instanceof HTMLPictureElement&&v(e.parentElement))},[t])}(e.useRef(null)),e.useEffect(()=>{if("undefined"==typeof window)return;const t=()=>{};return window.addEventListener(m,t),()=>window.removeEventListener(m,t)},[]);const[$,I]=e.useState(null),[S,M]=e.useState(0),x=Number.isFinite(t),z=s??"lazy",A=u??"async",[O,N]=e.useState(()=>!x||"lazy"!==z),P=e.useMemo(()=>(n??r).replace(/\/$/,""),[n]);e.useEffect(()=>{if(!x)return I(null),void M(0);I(null),M(0)},[x,t,n]),e.useEffect(()=>{if(!x)return;const e=new AbortController;return f(t,{cdnHost:n,signal:e.signal,bypassCache:S>0}).then(t=>{I(t),null==o||o(t)}).catch(t=>{"AbortError"!==(null==t?void 0:t.name)&&console.warn("Image data fetch failed:",t)}),()=>e.abort()},[x,t,n,o,S]),e.useEffect(()=>{N(!x||"lazy"!==z)},[x,t,z]),e.useEffect(()=>{if(!x||"lazy"!==z||O)return;if("undefined"==typeof window||void 0===window.IntersectionObserver)return void N(!0);const t=y.current;if(!t)return;const e=new IntersectionObserver(t=>{t.some(t=>t.isIntersecting)&&(N(!0),e.disconnect())},{rootMargin:"200px"});return e.observe(t),()=>e.disconnect()},[x,z,O]);const T=e.useMemo(()=>{var t,e,n;if(!$)return null;const i=(null==(t=$.variants_data)?void 0:t.variants)??{},r=i.WEBP,l=i.AVIF,o=i.JPEG,s=p(null==(e=i.WEBP)?void 0:e.metadata)||p(null==(n=i.JPEG)?void 0:n.metadata)||{...g},a=t=>(t=>{if(h(t))return/^https?:\/\//i.test(t)||t.startsWith("data:")?t:t.startsWith("//")?`https:${t}`:t.startsWith("/")?`${P}${t}`:`${P}/${t}`})("string"==typeof t?t:void 0),u=[w(r),w(o),w(l),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==o?void 0:o.sm,null==o?void 0:o.md,null==o?void 0:o.lg,null==o?void 0:o.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].map(t=>a(t??void 0)).filter(h),d=$,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(t=>h(t)?a(t):void 0).filter(h),f=d.fallback_url?[a(d.fallback_url)].filter(h):[],m=[...u,...c,...f][0];if(!m)return null;return{webp:r,avif:l,jpeg:o,toSrcSet:t=>{if(!t)return;const e=[],n=(t,n)=>{const i=a(t);i&&n&&e.push(`${i} ${n}w`)};return n(t.sm,s.sm),n(t.md,s.md),n(t.lg,s.lg),n(t.full,s.full),e.length?e.join(", "):void 0},fallback:m,widths:s,hasVariantSource:u.length>0}},[$,P]),j=e.useMemo(()=>{var t;return a((null==(t=null==$?void 0:$.variants_data)?void 0:t.variants)??null)},[$]),F=e.useMemo(()=>{var t;const e=(null==(t=null==$?void 0:$.variants_data)?void 0:t.status)??(null==$?void 0:$.variants_status)??"";return"string"==typeof e?e.toLowerCase():""},[$]),k="failed"===F||"error"===F,H=x&&Boolean($)&&!k&&!j&&S<5;e.useEffect(()=>{if(!H)return;if("undefined"==typeof window)return;const t=window.setTimeout(()=>{M(t=>t+1)},3e3);return()=>window.clearTimeout(t)},[H]);const L=e.useMemo(()=>{var t,e;return"string"==typeof d?d:(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.summary)??void 0},[d,$]),V=e.useMemo(()=>{var t,e;return"string"==typeof c?c:(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.title)??void 0},[c,$]),W=e.useMemo(()=>{var t,e,n,i;return(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.sizing)?void 0:e.width)??(null==(i=null==(n=null==$?void 0:$.variants_data)?void 0:n.metadata)?void 0:i.width)??void 0},[$]),B=e.useMemo(()=>{var t,e,n,i;return(null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.sizing)?void 0:e.height)??(null==(i=null==(n=null==$?void 0:$.variants_data)?void 0:n.metadata)?void 0:i.height)??void 0},[$]),C=e.useMemo(()=>{var t,e;const n=null==(e=null==(t=null==$?void 0:$.meta)?void 0:t.content_manifest)?void 0:e.optimized_filename;if(!n)return;const i=null==T?void 0:T.fallback;if(!i)return;const r=i.lastIndexOf(".");return`${n}.${r>-1?i.slice(r+1).toLowerCase():"jpg"}`},[$,T]);if(!x){const t={...E};return e.createElement("img",{ref:y,src:_,loading:z,decoding:A,alt:L,title:V,width:t.width,height:t.height,...t})}const D=function(t,e){return`${l(e)}/assets/low_res_thumb/${t}`}(t,n);if(!$||!T||!O){const t={...E};return e.createElement("img",{ref:y,src:D,loading:z,decoding:A,alt:L,title:V,width:t.width??W,height:t.height??B,...t})}const R=i??"(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px",{webp:q,avif:G,jpeg:J,toSrcSet:K,fallback:Q}=T,U=K(q),X=K(G),Y=K(J);return U||X||Y?e.createElement("picture",null,X?e.createElement("source",{type:"image/avif",srcSet:X,sizes:R}):null,U?e.createElement("source",{type:"image/webp",srcSet:U,sizes:R}):null,e.createElement("img",{ref:y,src:Q,srcSet:!Y||U||X?void 0:Y,sizes:!Y||U||X?void 0:R,loading:z,decoding:A,alt:L,title:V,width:W,height:B,"data-filename":C,...E})):e.createElement("img",{ref:y,src:Q,loading:z,decoding:A,alt:L,title:V,width:W,height:B,"data-filename":C,...E})}),E=e.memo(_);E.displayName="OpenSiteImg";const b="undefined"!=typeof globalThis?globalThis:void 0;if(b)if(b.process){const t=b.process.env??(b.process.env={});void 0===t.NODE_ENV&&(t.NODE_ENV="production")}else b.process={env:{NODE_ENV:"production"}};t.Img=E,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=opensite-img.umd.js.map

package/dist/browser/opensite-img.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opensite-img.umd.js","sources":["../../src/utils/cache.ts","../../src/utils/api.ts","../../src/core/useMediaSelectionEffect.ts","../../src/core/useResponsiveReset.ts","../../src/core/Img.tsx","../../src/index.ts"],"sourcesContent":["// 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, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport type { 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  mediaId?: number;\n  cdnHost?: string;\n  sizes?: string;\n  onImageData?: (data: ImageData) => void;\n};\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;\n\nconst isUrlString = (value: unknown): value is string => typeof value === 'string' && value.trim().length > 0;\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 ImgBase = forwardRef<HTMLImageElement, ImgProps>(function Img(\n  { mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, ...rest },\n  ref,\n) {\n  const imgRef = useRef<HTMLImageElement>(null);\n  useImperativeHandle(ref, () => imgRef.current as HTMLImageElement);\n  const pictureRef = useRef<HTMLPictureElement | null>(null);\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(() => data?.meta?.sizing?.height ?? data?.variants_data?.metadata?.height ?? undefined, [data]);\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\nexport const Img = memo(ImgBase);\nImg.displayName = 'OpenSiteImg';\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":["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","resetResponsivePictureState","element","querySelectorAll","forEach","source","srcset","getAttribute","setAttribute","removeAttribute","requestAnimationFrame","DEFAULT_WIDTHS","isUrlString","widthMapFromMetadata","v","w","widths","small","medium","large","full_size","pickBest","sizes","Object","values","find","Boolean","ImgBase","forwardRef","onImageData","loading","decoding","alt","title","src","directSrc","rest","ref","imgRef","useRef","useImperativeHandle","current","useEffect","HTMLPictureElement","parentElement","useResponsiveReset","window","handler","addEventListener","removeEventListener","setData","useState","retryCount","setRetryCount","hasMediaId","loadingAttr","decodingAttr","isInView","setIsInView","cdnOrigin","useMemo","controller","AbortController","then","d","catch","console","warn","abort","IntersectionObserver","node","observer","entries","isIntersecting","disconnect","rootMargin","observe","picture","webp","WEBP","avif","AVIF","jpeg","JPEG","_b","metadata","_c","normalizeCandidate","candidate","test","startsWith","ensureAbsolute","variantCandidates","map","filter","directCandidates","fallbackCandidates","fallback_url","fallback","toSrcSet","push","width","absolute","join","hasVariantSource","hasVariantEntries","variantsStatus","variants_status","toLowerCase","variantsFailed","shouldPollForVariants","timeoutId","setTimeout","count","clearTimeout","altAttr","meta","content_manifest","summary","titleAttr","widthAttr","sizing","_d","heightAttr","height","dataFilename","base","optimized_filename","href","dot","lastIndexOf","slice","r","React","createElement","placeholderSrc","buildPlaceholderImageUrl","sizesAttr","webpSet","avifSet","jpegSet","type","srcSet","Img","memo","displayName","globalObject","globalThis","process","env","NODE_ENV"],"mappings":"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"}

package/dist/core/Img.cjs

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+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 isUrlString = (value) => typeof value === 'string' && value.trim().length > 0;
+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 ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, ...rest }, ref) {
+    const imgRef = useRef(null);
+    useImperativeHandle(ref, () => imgRef.current);
+    const pictureRef = useRef(null);
+    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 }));
+});
+export const Img = memo(ImgBase);
+Img.displayName = 'OpenSiteImg';

package/dist/core/Img.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ImageData } from '../types.js';
+type NativeImgProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'sizes'> & {
+    src?: string;
+};
+export type ImgProps = NativeImgProps & {
+    mediaId?: number;
+    cdnHost?: string;
+    sizes?: string;
+    onImageData?: (data: ImageData) => void;
+};
+export declare const Img: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "sizes"> & {
+    src?: string;
+} & {
+    mediaId?: number;
+    cdnHost?: string;
+    sizes?: string;
+    onImageData?: (data: ImageData) => void;
+} & React.RefAttributes<HTMLImageElement>>>;
+export {};

package/dist/core/Img.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+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 isUrlString = (value) => typeof value === 'string' && value.trim().length > 0;
+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 ImgBase = forwardRef(function Img({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, ...rest }, ref) {
+    const imgRef = useRef(null);
+    useImperativeHandle(ref, () => imgRef.current);
+    const pictureRef = useRef(null);
+    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 }));
+});
+export const Img = memo(ImgBase);
+Img.displayName = 'OpenSiteImg';

package/dist/core/index.cjs

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

package/dist/core/index.d.ts

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

package/dist/core/index.js

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

package/dist/core/useMediaSelectionEffect.cjs

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+const MEDIA_SELECTED_EVENT = 'dt:media-selected';
+export function sendMediaSelection(blockId, payload) {
+    if (typeof window === 'undefined')
+        return;
+    window.dispatchEvent(new CustomEvent(MEDIA_SELECTED_EVENT, {
+        detail: { blockId, payload },
+    }));
+}
+export function useMediaSelectionEffect() {
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handler = () => {
+            // no-op: the real handler is attached in the builder via addEventListener
+        };
+        window.addEventListener(MEDIA_SELECTED_EVENT, handler);
+        return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
+    }, []);
+}

package/dist/core/useMediaSelectionEffect.d.ts

@@ -0,0 +1,2 @@
+export declare function sendMediaSelection(blockId: string, payload: unknown): void;
+export declare function useMediaSelectionEffect(): void;

package/dist/core/useMediaSelectionEffect.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+const MEDIA_SELECTED_EVENT = 'dt:media-selected';
+export function sendMediaSelection(blockId, payload) {
+    if (typeof window === 'undefined')
+        return;
+    window.dispatchEvent(new CustomEvent(MEDIA_SELECTED_EVENT, {
+        detail: { blockId, payload },
+    }));
+}
+export function useMediaSelectionEffect() {
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handler = () => {
+            // no-op: the real handler is attached in the builder via addEventListener
+        };
+        window.addEventListener(MEDIA_SELECTED_EVENT, handler);
+        return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
+    }, []);
+}

package/dist/core/useResponsiveReset.cjs

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+export function resetResponsivePictureState(element) {
+    if (!element)
+        return;
+    element.querySelectorAll('source').forEach((source) => {
+        // force browser to reconsider responsive sources
+        const srcset = source.getAttribute('srcset');
+        if (srcset) {
+            source.setAttribute('data-srcset', srcset);
+            source.removeAttribute('srcset');
+            requestAnimationFrame(() => {
+                source.setAttribute('srcset', srcset);
+            });
+        }
+    });
+}
+export function useResponsiveReset(ref) {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (element instanceof HTMLPictureElement) {
+            resetResponsivePictureState(element);
+        }
+        else if (element.parentElement instanceof HTMLPictureElement) {
+            resetResponsivePictureState(element.parentElement);
+        }
+    }, [ref]);
+}

package/dist/core/useResponsiveReset.d.ts

@@ -0,0 +1,2 @@
+export declare function resetResponsivePictureState(element: HTMLPictureElement | null): void;
+export declare function useResponsiveReset(ref: React.RefObject<HTMLPictureElement | HTMLImageElement>): void;

package/dist/core/useResponsiveReset.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+export function resetResponsivePictureState(element) {
+    if (!element)
+        return;
+    element.querySelectorAll('source').forEach((source) => {
+        // force browser to reconsider responsive sources
+        const srcset = source.getAttribute('srcset');
+        if (srcset) {
+            source.setAttribute('data-srcset', srcset);
+            source.removeAttribute('srcset');
+            requestAnimationFrame(() => {
+                source.setAttribute('srcset', srcset);
+            });
+        }
+    });
+}
+export function useResponsiveReset(ref) {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (element instanceof HTMLPictureElement) {
+            resetResponsivePictureState(element);
+        }
+        else if (element.parentElement instanceof HTMLPictureElement) {
+            resetResponsivePictureState(element.parentElement);
+        }
+    }, [ref]);
+}

package/dist/index.cjs

@@ -0,0 +1,16 @@
+const globalObject = typeof globalThis !== 'undefined' ? globalThis : undefined;
+if (globalObject) {
+    if (!globalObject.process) {
+        globalObject.process = {
+            env: { NODE_ENV: 'production' },
+        };
+    }
+    else {
+        const env = globalObject.process.env ?? (globalObject.process.env = {});
+        if (typeof env.NODE_ENV === 'undefined') {
+            env.NODE_ENV = 'production';
+        }
+    }
+}
+export * from './core/index.js';
+export * from './types.js';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './core/index.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,16 @@
+const globalObject = typeof globalThis !== 'undefined' ? globalThis : undefined;
+if (globalObject) {
+    if (!globalObject.process) {
+        globalObject.process = {
+            env: { NODE_ENV: 'production' },
+        };
+    }
+    else {
+        const env = globalObject.process.env ?? (globalObject.process.env = {});
+        if (typeof env.NODE_ENV === 'undefined') {
+            env.NODE_ENV = 'production';
+        }
+    }
+}
+export * from './core/index.js';
+export * from './types.js';

package/dist/types.cjs

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -0,0 +1,49 @@
+export type ProgressiveSizes = Partial<Record<'sm' | 'md' | 'lg' | 'full', string>>;
+export type ImageVariantsMap = Partial<Record<'AVIF' | 'WEBP' | 'JPEG', ProgressiveSizes & {
+    metadata?: {
+        widths?: {
+            small?: number;
+            medium?: number;
+            large?: number;
+            full_size?: number;
+        };
+    };
+}>>;
+export interface ImageVariantsData {
+    variants?: ImageVariantsMap | null;
+    metadata?: {
+        width?: number;
+        height?: number;
+    };
+    status?: string;
+}
+export interface ImageData {
+    id: number;
+    name?: string;
+    media_type?: string;
+    img_url?: string | null;
+    img_src?: string | null;
+    thumb_src?: string | null;
+    med_src?: string | null;
+    file_data_url?: string | null;
+    file_data_thumbnail_url?: string | null;
+    low_res_thumb?: string | null;
+    fallback_url?: string;
+    variants_status?: string | null;
+    meta?: {
+        sizing?: {
+            height?: number;
+            width?: number;
+            size_in_mb?: number;
+            aspect_ratio?: number;
+        };
+        semantic_filename?: string;
+        content_manifest?: {
+            title?: string;
+            summary?: string;
+            description?: string;
+            optimized_filename?: string;
+        };
+    };
+    variants_data?: ImageVariantsData | null;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/api.cjs

@@ -0,0 +1,94 @@
+import { cacheGet, cacheSet } from './cache.js';
+export const DEFAULT_CDN_HOST = 'https://cdn.ing';
+function normalizeHost(cdnHost) {
+    return (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, '');
+}
+function buildPrimaryImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/assets/images/${mediaId}`;
+}
+function buildLegacyImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/i/r/${mediaId}`;
+}
+export function buildPlaceholderImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/assets/low_res_thumb/${mediaId}`;
+}
+function hasRenderableUrlVariant(variant) {
+    if (!variant)
+        return false;
+    const candidates = [variant.sm, variant.md, variant.lg, variant.full];
+    return candidates.some((value) => typeof value === 'string' && value.trim().length > 0);
+}
+export function imageVariantsHaveRenderableSource(variants) {
+    if (!variants)
+        return false;
+    return ['AVIF', 'WEBP', 'JPEG'].some((format) => {
+        const entry = variants?.[format];
+        return hasRenderableUrlVariant(entry);
+    });
+}
+function hasUrlValue(value) {
+    return typeof value === 'string' && value.trim().length > 0;
+}
+export function imageDataHasRenderableSource(data) {
+    if (!data)
+        return false;
+    if (imageVariantsHaveRenderableSource(data.variants_data?.variants ?? null)) {
+        return true;
+    }
+    const raw = data;
+    const directFields = [
+        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,
+    ];
+    return directFields.some(hasUrlValue);
+}
+async function fetchFrom(url, signal) {
+    const res = await fetch(url, { signal });
+    if (!res.ok) {
+        const error = new Error(`Failed to fetch image data (status ${res.status}) from ${url}`);
+        error.status = res.status;
+        throw error;
+    }
+    return (await res.json());
+}
+export async function fetchImageData(mediaId, options = {}) {
+    if (!Number.isFinite(mediaId)) {
+        throw new Error('Invalid mediaId provided to fetchImageData');
+    }
+    const host = normalizeHost(options.cdnHost);
+    const cacheKey = `image:${host}:${mediaId}`;
+    if (!options.bypassCache) {
+        const cached = cacheGet(cacheKey);
+        if (cached)
+            return cached;
+    }
+    const urls = [buildPrimaryImageUrl(mediaId, host), buildLegacyImageUrl(mediaId, host)];
+    let lastError;
+    for (const url of urls) {
+        try {
+            const data = await fetchFrom(url, options.signal);
+            if (imageDataHasRenderableSource(data)) {
+                cacheSet(cacheKey, data);
+            }
+            return data;
+        }
+        catch (err) {
+            if (err?.name === 'AbortError') {
+                throw err;
+            }
+            lastError = err;
+        }
+    }
+    if (lastError instanceof Error) {
+        throw lastError;
+    }
+    throw new Error(`Failed to fetch image data for mediaId ${mediaId}`);
+}

package/dist/utils/api.d.ts

@@ -0,0 +1,11 @@
+import type { ImageData, ImageVariantsMap } from '../types.js';
+export type FetchImageOptions = {
+    cdnHost?: string;
+    signal?: AbortSignal;
+    bypassCache?: boolean;
+};
+export declare const DEFAULT_CDN_HOST = "https://cdn.ing";
+export declare function buildPlaceholderImageUrl(mediaId: number, cdnHost?: string): string;
+export declare function imageVariantsHaveRenderableSource(variants?: ImageVariantsMap | null): boolean;
+export declare function imageDataHasRenderableSource(data: ImageData): boolean;
+export declare function fetchImageData(mediaId: number, options?: FetchImageOptions): Promise<ImageData>;

package/dist/utils/api.js

@@ -0,0 +1,94 @@
+import { cacheGet, cacheSet } from './cache.js';
+export const DEFAULT_CDN_HOST = 'https://cdn.ing';
+function normalizeHost(cdnHost) {
+    return (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, '');
+}
+function buildPrimaryImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/assets/images/${mediaId}`;
+}
+function buildLegacyImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/i/r/${mediaId}`;
+}
+export function buildPlaceholderImageUrl(mediaId, cdnHost) {
+    const host = normalizeHost(cdnHost);
+    return `${host}/assets/low_res_thumb/${mediaId}`;
+}
+function hasRenderableUrlVariant(variant) {
+    if (!variant)
+        return false;
+    const candidates = [variant.sm, variant.md, variant.lg, variant.full];
+    return candidates.some((value) => typeof value === 'string' && value.trim().length > 0);
+}
+export function imageVariantsHaveRenderableSource(variants) {
+    if (!variants)
+        return false;
+    return ['AVIF', 'WEBP', 'JPEG'].some((format) => {
+        const entry = variants?.[format];
+        return hasRenderableUrlVariant(entry);
+    });
+}
+function hasUrlValue(value) {
+    return typeof value === 'string' && value.trim().length > 0;
+}
+export function imageDataHasRenderableSource(data) {
+    if (!data)
+        return false;
+    if (imageVariantsHaveRenderableSource(data.variants_data?.variants ?? null)) {
+        return true;
+    }
+    const raw = data;
+    const directFields = [
+        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,
+    ];
+    return directFields.some(hasUrlValue);
+}
+async function fetchFrom(url, signal) {
+    const res = await fetch(url, { signal });
+    if (!res.ok) {
+        const error = new Error(`Failed to fetch image data (status ${res.status}) from ${url}`);
+        error.status = res.status;
+        throw error;
+    }
+    return (await res.json());
+}
+export async function fetchImageData(mediaId, options = {}) {
+    if (!Number.isFinite(mediaId)) {
+        throw new Error('Invalid mediaId provided to fetchImageData');
+    }
+    const host = normalizeHost(options.cdnHost);
+    const cacheKey = `image:${host}:${mediaId}`;
+    if (!options.bypassCache) {
+        const cached = cacheGet(cacheKey);
+        if (cached)
+            return cached;
+    }
+    const urls = [buildPrimaryImageUrl(mediaId, host), buildLegacyImageUrl(mediaId, host)];
+    let lastError;
+    for (const url of urls) {
+        try {
+            const data = await fetchFrom(url, options.signal);
+            if (imageDataHasRenderableSource(data)) {
+                cacheSet(cacheKey, data);
+            }
+            return data;
+        }
+        catch (err) {
+            if (err?.name === 'AbortError') {
+                throw err;
+            }
+            lastError = err;
+        }
+    }
+    if (lastError instanceof Error) {
+        throw lastError;
+    }
+    throw new Error(`Failed to fetch image data for mediaId ${mediaId}`);
+}

package/dist/utils/cache.cjs

@@ -0,0 +1,12 @@
+// Lightweight multi-level cache inspired by ecosystem guidelines
+// L1 (instance) will be handled in components via refs/state; this is L2 (module-level) cache
+const l2Cache = new Map();
+export function cacheGet(key) {
+    return l2Cache.get(key);
+}
+export function cacheSet(key, value) {
+    l2Cache.set(key, value);
+}
+export function cacheHas(key) {
+    return l2Cache.has(key);
+}

package/dist/utils/cache.d.ts

@@ -0,0 +1,3 @@
+export declare function cacheGet<T>(key: string): T | undefined;
+export declare function cacheSet<T>(key: string, value: T): void;
+export declare function cacheHas(key: string): boolean;

package/dist/utils/cache.js

@@ -0,0 +1,12 @@
+// Lightweight multi-level cache inspired by ecosystem guidelines
+// L1 (instance) will be handled in components via refs/state; this is L2 (module-level) cache
+const l2Cache = new Map();
+export function cacheGet(key) {
+    return l2Cache.get(key);
+}
+export function cacheSet(key, value) {
+    l2Cache.set(key, value);
+}
+export function cacheHas(key) {
+    return l2Cache.has(key);
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@page-speed/img",
+  "version": "0.0.1",
+  "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",
+    "seo",
+    "tree-shakeable"
+  ],
+  "homepage": "https://github.com/opensite-ai/page-speed-img#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opensite-ai/page-speed-img.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opensite-ai/page-speed-img/issues"
+  },
+  "author": "OpenSite AI (https://opensite.ai)",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs",
+      "types": "./dist/core/index.d.ts"
+    },
+    "./core/img": {
+      "import": "./dist/core/Img.js",
+      "require": "./dist/core/Img.cjs",
+      "types": "./dist/core/Img.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "pnpm run build:lib && pnpm run build:umd",
+    "build:lib": "tsc && node scripts/emit-cjs.js",
+    "build:umd": "vite build --config vite.umd.config.ts",
+    "build:watch": "tsc -w",
+    "clean": "rimraf dist",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
+    "bundle-analysis": "node scripts/analyze-bundle.js || true",
+    "prepare": "husky",
+    "prepack": "pnpm run build",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
+    "eslint": "^9.37.0",
+    "happy-dom": "^15.11.7",
+    "husky": "^9.1.7",
+    "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"
+  },
+  "dependencies": {
+    "@page-speed/hooks": "0.1.3"
+  },
+  "packageManager": "pnpm@10.24.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  }
+}