lazy-svelte-image 1.1.2 → 2.0.0

package/README.md

@@ -1,58 +1,263 @@
-# lazy-image-loader
+# lazy-svelte-image ⚡
 
+[![npm version](https://img.shields.io/npm/v/lazy-svelte-image.svg)](https://www.npmjs.com/package/lazy-svelte-image)
+[![license](https://img.shields.io/npm/l/lazy-svelte-image.svg)](https://github.com/rishabharidas/lazy-svelte-image/blob/main/LICENSE)
+[![svelte](https://img.shields.io/badge/svelte-5%20%7C%204%20%7C%203-FF3E00.svg)](https://svelte.dev)
+[![vulnerabilities](https://img.shields.io/badge/vulnerabilities-0-brightgreen.svg)](https://github.com/rishabharidas/lazy-svelte-image)
+[![Universal JS](https://img.shields.io/badge/Vanilla%20JS%20%26%20Web%20Component-supported-blue.svg)](https://github.com/rishabharidas/lazy-svelte-image)
 
-A custom Image component/tag like component with customizations, loader ...
+A high-performance, SEO-optimized, **universal** image loading library for **Svelte 5, 4, 3**, **Vanilla JavaScript**, and **all modern frameworks (React, Vue, Angular, Solid)** via HTML5 Web Components or standalone CDN `<script>`.
 
-## Installing the Package
+---
 
-If you're seeing this, you've probably already done this step. Congrats!
+## 🌟 Highlights
+
+- ⚡ **Universal & Framework-Agnostic**: Works as a Svelte component, Svelte action (`use:lazyImage`), HTML5 Web Component (`<lazy-image>`), Vanilla JS class (`LazyImage`), or direct CDN script tag.
+- 🚀 **Svelte 5 & Backwards Compatible**: Runs natively on the latest Svelte 5 as well as Svelte 4 and Svelte 3.
+- 🔒 **Zero Vulnerabilities**: Completely modernized dependency tree with 0 security advisories.
+- 🔍 **SEO & Core Web Vitals Optimized**:
+  - **SSR & Crawler Indexing**: Googlebot, Bing, Pinterest, and social crawlers discover images immediately on initial page load via SSR-friendly rendering and automatic `<noscript>` fallbacks.
+  - **Zero Cumulative Layout Shift (CLS)**: Built-in `aspectRatio` space reservation prevents jarring content shifts.
+  - **Schema.org Structured Data**: Automatic Google-compliant `ImageObject` JSON-LD generation for image search previews.
+  - **LCP Optimization**: Supports `fetchpriority="high" | "low"` and `decoding="async"`.
+- 🎨 **Blur-Up LQIP**: Low-Quality Image Placeholder support with smooth, customizable blur transitions.
+- 🔁 **Error Recovery & Retries**: Built-in broken image indicator with customizable slots and interactive retry button.
+- 📦 **Zero-Config CDN**: Drop-in `<script>` tag for WordPress, PHP, Hugo, or plain HTML websites.
+
+---
+
+## 📦 Installation
 
 ```bash
-npm i lazy-svelte-image
+npm install lazy-svelte-image
 ```
 
-## Usage
+_(Note: Svelte is an optional peer dependency. You can install this package in Vanilla JS or React/Vue projects without peer dependency warnings!)_
 
-Once you've installed you can import the package and use just like ```<img>``` . an exaple is given below
+---
 
-```bash
-import { Image } from 'lazy-svelte-image'
+## 🚀 Quick Start
+
+### 1. Svelte Component
+
+```svelte
+<script>
+	import { Image } from 'lazy-svelte-image';
+</script>
+
+<!-- High-performance image with blur-up LQIP and zero CLS -->
+<Image
+	src="https://images.example.com/landscape.jpg"
+	placeholder="https://images.example.com/landscape-thumb.jpg"
+	alt="Majestic mountain lake at sunrise"
+	aspectRatio="16/9"
+	caption="Rocky Mountains, Colorado"
+	schema={true}
+/>
+```
+
+#### With Custom Slots and Error Retry:
+
+```svelte
+<Image src="/path/to/image.jpg" aspectRatio="4/3" retry={true} maxRetries={3}>
+	<!-- Custom spinner -->
+	<div slot="loader" class="my-custom-spinner">Loading...</div>
+
+	<!-- Custom broken state -->
+	<div slot="broken" class="my-custom-error">
+		<span>Oops! Image could not be loaded.</span>
+	</div>
+
+	<!-- Custom overlay watermark or badge -->
+	<span slot="overlay" class="badge">PRO</span>
+</Image>
+```
+
+---
+
+### 2. Svelte Action (`use:lazyImage`)
+
+For minimalists who want zero wrapper elements around a native `<img>`:
+
+```svelte
+<script>
+	import { lazyImage } from 'lazy-svelte-image';
+</script>
+
+<img
+	use:lazyImage={{
+		src: 'https://images.example.com/photo.jpg',
+		placeholder: 'https://images.example.com/photo-thumb.jpg',
+		rootMargin: '200px'
+	}}
+	alt="Modern living room interior"
+	style="aspect-ratio: 16/9; width: 100%; object-fit: cover;"
+/>
+```
+
+---
 
+### 3. HTML5 Web Component (`<lazy-image>`)
 
-<Image src="" alt="" />
+Works in **React**, **Vue**, **Angular**, **Solid**, or plain HTML without requiring any Svelte runtime!
 
-# or
+```html
+<!-- Import the web component -->
+<script type="module">
+	import 'lazy-svelte-image/element';
+</script>
 
-<Image> <!-- slot--> </Image>
+<lazy-image
+	src="https://images.example.com/nature.jpg"
+	placeholder="https://images.example.com/nature-thumb.jpg"
+	alt="Autumn forest path"
+	aspect-ratio="16/9"
+	caption="Autumn foliage"
+	retry
+></lazy-image>
 ```
 
+---
+
+### 4. Vanilla JavaScript
+
+Framework-free imperative API:
+
+```javascript
+import { createLazyImage } from 'lazy-svelte-image/vanilla';
+import 'lazy-svelte-image/style.css';
+
+const imageInstance = createLazyImage('#my-image-container', {
+	src: 'https://images.example.com/hero.jpg',
+	placeholder: 'https://images.example.com/hero-lqip.jpg',
+	alt: 'Hero banner',
+	aspectRatio: '16/9',
+	schema: true,
+	retry: true,
+	onLoad: (event) => console.log('Image loaded!', event),
+	onError: (error) => console.error('Image failed', error)
+});
+```
+
+---
+
+### 5. Global CDN Usage (No bundler required)
+
+Add directly to any traditional website (WordPress, PHP, Shopify, plain HTML):
+
+```html
+<!-- Include stylesheet and script -->
+<link rel="stylesheet" href="https://unpkg.com/lazy-svelte-image/dist/style.css" />
+<script src="https://unpkg.com/lazy-svelte-image/dist/browser.global.js"></script>
+
+<!-- Use the custom element immediately -->
+<lazy-image
+	src="https://images.example.com/photo.jpg"
+	aspect-ratio="16/9"
+	alt="Example image"
+></lazy-image>
+```
+
+---
+
+## 🔍 SEO & Core Web Vitals Guide
+
+### 1. Cumulative Layout Shift (CLS = 0)
+
+When an image doesn't have an explicit size or aspect ratio, the browser cannot reserve vertical space while loading, causing the page content to jump when the image renders.
+By specifying `aspectRatio="16/9"` or `aspectRatio="4/3"`, `lazy-svelte-image` enforces CSS aspect-ratio on the container before the image arrives, ensuring **zero layout shift**.
+
+### 2. SSR & Search Engine Indexing
+
+Older lazy loaders hide the `<img>` element during SSR until hydration `onMount`, resulting in web crawlers indexing nothing.
+`lazy-svelte-image` outputs:
+
+1. Crawler-friendly attributes on initial HTML render.
+2. An automatic `<noscript><img src="..." alt="..." /></noscript>` block ensuring 100% indexing even if JavaScript execution is delayed or disabled.
+
+### 3. Schema.org Structured Data
+
+Setting `schema={true}` automatically injects Google-compliant `ImageObject` JSON-LD metadata into the page for enhanced Google Images visibility:
+
+```json
+{
+	"@context": "https://schema.org",
+	"@type": "ImageObject",
+	"contentUrl": "https://images.example.com/photo.jpg",
+	"url": "https://images.example.com/photo.jpg",
+	"name": "Alt description",
+	"description": "Caption or Alt text",
+	"width": "1920",
+	"height": "1080"
+}
+```
+
+---
+
+## 🛠️ API Reference
+
+### Component Props (`<Image />`)
+
+| Prop              | Type                                                       | Default       | Description                                                       |
+| :---------------- | :--------------------------------------------------------- | :------------ | :---------------------------------------------------------------- |
+| `src`             | `string`                                                   | _(Required)_  | URL of the high-resolution image                                  |
+| `alt`             | `string`                                                   | `''`          | Descriptive alternative text for accessibility and SEO            |
+| `placeholder`     | `string`                                                   | `undefined`   | Low-resolution image or data URI for LQIP blur-up                 |
+| `aspectRatio`     | `string \| number`                                         | `undefined`   | CSS aspect ratio (e.g. `'16/9'`, `'4/3'`, `'1/1'`) to prevent CLS |
+| `width`           | `string \| number`                                         | `undefined`   | Width of the image container                                      |
+| `height`          | `string \| number`                                         | `undefined`   | Height of the image container                                     |
+| `srcset`          | `string`                                                   | `undefined`   | Responsive image candidates (`srcset`)                            |
+| `sizes`           | `string`                                                   | `undefined`   | Responsive image sizes rule (`sizes`)                             |
+| `sources`         | `PictureSource[]`                                          | `[]`          | Array of source definitions for `<picture>` elements              |
+| `objectFit`       | `'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'`     | CSS `object-fit` property                                         |
+| `objectPosition`  | `string`                                                   | `'center'`    | CSS `object-position` property                                    |
+| `rootMargin`      | `string`                                                   | `'200px'`     | Preload margin for `IntersectionObserver`                         |
+| `threshold`       | `number \| number[]`                                       | `0.01`        | Intersection threshold                                            |
+| `native`          | `boolean`                                                  | `false`       | Use browser's native `loading="lazy"`                             |
+| `fetchpriority`   | `'high' \| 'low' \| 'auto'`                                | `undefined`   | Resource priority hint (useful for LCP images)                    |
+| `decoding`        | `'async' \| 'sync' \| 'auto'`                              | `'async'`     | Image decoding mode                                               |
+| `fadeDuration`    | `number`                                                   | `300`         | Fade-in transition duration in milliseconds                       |
+| `blur`            | `number`                                                   | `12`          | Blur radius in pixels for the LQIP placeholder                    |
+| `backgroundColor` | `string`                                                   | `'#c2c2c224'` | Placeholder background color                                      |
+| `disableLoader`   | `boolean`                                                  | `false`       | Disable the loading spinner                                       |
+| `disabeLoader`    | `boolean`                                                  | `false`       | Backward-compatible alias for `disableLoader`                     |
+| `disableBroken`   | `boolean`                                                  | `false`       | Disable broken image fallback view                                |
+| `retry`           | `boolean`                                                  | `false`       | Display retry button on failure                                   |
+| `maxRetries`      | `number`                                                   | `2`           | Maximum retry attempts                                            |
+| `caption`         | `string`                                                   | `undefined`   | Optional figure caption                                           |
+| `title`           | `string`                                                   | `undefined`   | Image title attribute                                             |
+| `schema`          | `boolean \| object`                                        | `false`       | Generate Schema.org `ImageObject` JSON-LD                         |
+
+### Slots
 
-## Customization
+| Slot Name | Description                                              |
+| :-------- | :------------------------------------------------------- |
+| `loader`  | Custom loading indicator / spinner                       |
+| `broken`  | Custom broken image fallback UI                          |
+| `overlay` | Custom overlay element (e.g. badge, watermark, controls) |
+| `caption` | Custom caption markup inside `<figcaption>`              |
 
-Currenlty you can provide custom loader and broken image icon as slot. use slot like how you use it in svelte.
+### Events
 
-  ### Props
+| Event       | Detail                                 | Description                                               |
+| :---------- | :------------------------------------- | :-------------------------------------------------------- |
+| `load`      | `{ event: Event }`                     | Fired when the high-resolution image has finished loading |
+| `error`     | `{ event: Event }`                     | Fired when the image fails to load                        |
+| `intersect` | `{ entry: IntersectionObserverEntry }` | Fired when the image enters the observer viewport         |
+| `retry`     | `{ attempt: number }`                  | Fired when a retry attempt is triggered                   |
 
-  - <code>disableLoader</code> - disable all loaders
-  - <code>disableBroken</code> - disable all broken view
-  - <code>backgroundColor</code> - set custom background color for default broken/loader
+---
 
-  ### Slots
+## 🔄 Backward Compatibility with v1.x
 
-  #### For custom broken Images/Icons
+This version is **100% backward compatible** with `lazy-svelte-image` v1.1.2:
 
-  ```bash
-  <span slot="boken">
-    <!-- provide code here -->
-  </span>
-  ```
-  #### For custom Loaders
+- Existing props `src`, `alt`, `backgroundColor`, `disableLoader`, `disabeLoader` (original typo alias), and `disableBroken` are fully supported.
+- Existing slots `slot="loader"` and `slot="broken"` work without any code changes.
+- Existing projects upgrading from Svelte 4 to Svelte 5 will work without modifications.
 
-  ```bash
-  <span slot="loader">
-    <!-- provide loader code here  -->
-  </span>
-  ```
+---
 
+## 📄 License
 
-##### Looking forward for feature requests and usages 😃..
+MIT © [Rishabh Haridas](https://github.com/rishabharidas)

package/dist/action/index.d.ts

@@ -0,0 +1,24 @@
+export interface LazyImageActionOptions {
+    src: string;
+    placeholder?: string;
+    srcset?: string;
+    sizes?: string;
+    rootMargin?: string;
+    threshold?: number | number[];
+    native?: boolean;
+    fadeDuration?: number;
+    onLoad?: (e: Event) => void;
+    onError?: (e: Event) => void;
+    onIntersect?: (entry: IntersectionObserverEntry) => void;
+}
+/**
+ * Svelte Action `use:lazyImage`
+ * Works across Svelte 3, Svelte 4, and Svelte 5!
+ *
+ * Usage:
+ * <img use:lazyImage={{ src: 'large.jpg', placeholder: 'thumb.jpg' }} alt="Hero" />
+ */
+export declare function lazyImage(node: HTMLImageElement, options: LazyImageActionOptions): {
+    update(newOptions: LazyImageActionOptions): void;
+    destroy(): void;
+};

package/dist/action/index.js

@@ -0,0 +1,70 @@
+import { observeElement } from '../vanilla/index.js';
+/**
+ * Svelte Action `use:lazyImage`
+ * Works across Svelte 3, Svelte 4, and Svelte 5!
+ *
+ * Usage:
+ * <img use:lazyImage={{ src: 'large.jpg', placeholder: 'thumb.jpg' }} alt="Hero" />
+ */
+export function lazyImage(node, options) {
+    let currentOptions = { ...options };
+    let unobserve = null;
+    const fadeDuration = currentOptions.fadeDuration ?? 300;
+    node.style.transition = `opacity ${fadeDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+    if (currentOptions.placeholder) {
+        node.src = currentOptions.placeholder;
+        node.style.opacity = '0.6';
+        node.style.filter = 'blur(8px)';
+    }
+    else {
+        node.style.opacity = '0';
+    }
+    function load() {
+        const img = new Image();
+        if (currentOptions.srcset)
+            img.srcset = currentOptions.srcset;
+        if (currentOptions.sizes)
+            img.sizes = currentOptions.sizes;
+        img.src = currentOptions.src;
+        img.onload = (e) => {
+            node.src = currentOptions.src;
+            if (currentOptions.srcset)
+                node.srcset = currentOptions.srcset;
+            if (currentOptions.sizes)
+                node.sizes = currentOptions.sizes;
+            node.style.opacity = '1';
+            node.style.filter = 'none';
+            node.dispatchEvent(new CustomEvent('lazyload', { detail: { event: e } }));
+            currentOptions.onLoad?.(e);
+        };
+        img.onerror = (e) => {
+            node.dispatchEvent(new CustomEvent('lazyerror', { detail: { event: e } }));
+            currentOptions.onError?.(e);
+        };
+    }
+    if (currentOptions.native) {
+        node.loading = 'lazy';
+        load();
+    }
+    else {
+        unobserve = observeElement(node, (entry) => {
+            node.dispatchEvent(new CustomEvent('lazyintersect', { detail: { entry } }));
+            currentOptions.onIntersect?.(entry);
+            load();
+        }, {
+            rootMargin: currentOptions.rootMargin,
+            threshold: currentOptions.threshold
+        });
+    }
+    return {
+        update(newOptions) {
+            currentOptions = { ...newOptions };
+        },
+        destroy() {
+            if (unobserve) {
+                unobserve();
+                unobserve = null;
+            }
+        }
+    };
+}

package/dist/browser.d.ts

@@ -0,0 +1,3 @@
+import { LazyImage, createLazyImage, createImageSchema, SPINNER_SVG, BROKEN_SVG } from './vanilla/index.js';
+import { LazyImageElement, defineLazyImageElement } from './element/index.js';
+export { LazyImage, createLazyImage, createImageSchema, LazyImageElement, defineLazyImageElement, SPINNER_SVG, BROKEN_SVG };

package/dist/browser.global.js

@@ -0,0 +1,140 @@
+var LazyImageGlobal=(function(d){"use strict";var T=Object.defineProperty;var H=(d,h,m)=>h in d?T(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var o=(d,h,m)=>H(d,typeof h!="symbol"?h+"":h,m);const h='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lazy-image-spinner"><circle stroke-dasharray="113.097 39.699" r="24" stroke-width="4" stroke="currentColor" fill="none" cy="50" cx="50"></circle></svg>',m='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="lazy-image-broken-icon"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM116.6 187.9L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9zM220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3L220.9 270z"/></svg>';function u(a){const t={"@context":"https://schema.org","@type":"ImageObject",contentUrl:a.src,url:a.src,name:a.alt||a.title||"Image",description:a.alt||a.caption||""};return a.width&&(t.width=String(a.width)),a.height&&(t.height=String(a.height)),a.caption&&(t.caption=a.caption),typeof a.schema=="object"&&a.schema!==null&&Object.assign(t,a.schema),JSON.stringify(t)}const v=new Map,g=new Map;function x(a,t){return`${a}_${Array.isArray(t)?t.join(","):t}`}function E(a,t,i={}){if(typeof window>"u"||!("IntersectionObserver"in window))return t({isIntersecting:!0,target:a}),()=>{};const r=i.rootMargin||"200px",n=i.threshold??.01,e=x(r,n);let s=v.get(e);return s||(s=new IntersectionObserver(l=>{for(const c of l)if(c.isIntersecting){const p=g.get(c.target);p&&(p(c),s==null||s.unobserve(c.target),g.delete(c.target))}},{rootMargin:r,threshold:n}),v.set(e,s)),g.set(a,t),s.observe(a),()=>{s==null||s.unobserve(a),g.delete(a)}}class y{constructor(t,i){o(this,"container");o(this,"options");o(this,"state","idle");o(this,"unobserve",null);o(this,"currentAttempt",0);o(this,"wrapperEl",null);o(this,"placeholderImgEl",null);o(this,"mainImgEl",null);o(this,"pictureEl",null);o(this,"overlayEl",null);o(this,"schemaScriptEl",null);const r=typeof t=="string"?document.querySelector(t):t;if(!r||!(r instanceof HTMLElement))throw new Error("[LazyImage] Invalid target element or selector.");this.container=r,this.options={...i},this.init()}init(){this.renderStructure(),this.options.native?this.loadMainImage():this.unobserve=E(this.container,t=>{var i,r;(r=(i=this.options).onIntersect)==null||r.call(i,t),this.loadMainImage()},{rootMargin:this.options.rootMargin,threshold:this.options.threshold})}renderStructure(){this.container.innerHTML="";const t=this.options,i=document.createElement("div");if(i.className="lazy-image-wrapper",t.backgroundColor&&i.style.setProperty("--lazy-bg",t.backgroundColor),t.fadeDuration!==void 0&&i.style.setProperty("--lazy-fade",`${t.fadeDuration}ms`),t.blur!==void 0&&i.style.setProperty("--lazy-blur",`${t.blur}px`),t.objectFit&&i.style.setProperty("--lazy-object-fit",t.objectFit),t.objectPosition&&i.style.setProperty("--lazy-object-position",t.objectPosition),t.aspectRatio&&(i.setAttribute("data-aspect-ratio","true"),i.style.setProperty("--lazy-aspect-ratio",String(t.aspectRatio))),t.width&&(i.style.width=typeof t.width=="number"?`${t.width}px`:t.width),t.height&&(i.style.height=typeof t.height=="number"?`${t.height}px`:t.height),this.wrapperEl=i,t.placeholder){const e=document.createElement("img");e.className="lazy-image-placeholder-img",e.src=t.placeholder,e.alt="",e.setAttribute("aria-hidden","true"),e.decoding="async",i.appendChild(e),this.placeholderImgEl=e}const r=document.createElement("div");if(r.className="lazy-image-overlay",i.appendChild(r),this.overlayEl=r,(t.disableLoader??t.disabeLoader??!1)||(r.innerHTML=`<div class="lazy-image-loader-container">${h}</div>`),t.sources&&t.sources.length>0){const e=document.createElement("picture");e.className="lazy-image-picture";for(const l of t.sources){const c=document.createElement("source");c.srcset=l.srcset,l.type&&(c.type=l.type),l.media&&(c.media=l.media),l.sizes&&(c.sizes=l.sizes),e.appendChild(c)}const s=document.createElement("img");s.className="lazy-image-main",s.alt=t.alt||"",t.title&&(s.title=t.title),t.native&&(s.loading="lazy",s.src=t.src,t.srcset&&(s.srcset=t.srcset),t.sizes&&(s.sizes=t.sizes)),s.decoding=t.decoding||"async",t.fetchpriority&&s.setAttribute("fetchpriority",t.fetchpriority),e.appendChild(s),i.appendChild(e),this.pictureEl=e,this.mainImgEl=s}else{const e=document.createElement("img");e.className="lazy-image-main",e.alt=t.alt||"",t.title&&(e.title=t.title),t.native&&(e.loading="lazy",e.src=t.src,t.srcset&&(e.srcset=t.srcset),t.sizes&&(e.sizes=t.sizes)),e.decoding=t.decoding||"async",t.fetchpriority&&e.setAttribute("fetchpriority",t.fetchpriority),i.appendChild(e),this.mainImgEl=e}if(this.container.appendChild(i),t.caption){const e=document.createElement("figcaption");e.className="lazy-image-caption",e.textContent=t.caption,this.container.appendChild(e)}if(t.schema){const e=document.createElement("script");e.type="application/ld+json",e.textContent=u(t),this.container.appendChild(e),this.schemaScriptEl=e}}loadMainImage(){if(!this.mainImgEl)return;this.state="loading";const t=new Image;this.options.srcset&&(t.srcset=this.options.srcset),this.options.sizes&&(t.sizes=this.options.sizes),t.src=this.options.src,t.onload=i=>{var r,n;this.state="loaded",this.mainImgEl&&(this.mainImgEl.src=this.options.src,this.options.srcset&&(this.mainImgEl.srcset=this.options.srcset),this.options.sizes&&(this.mainImgEl.sizes=this.options.sizes),this.mainImgEl.classList.add("is-loaded")),this.placeholderImgEl&&this.placeholderImgEl.classList.add("is-hidden"),this.overlayEl&&(this.overlayEl.innerHTML=""),(n=(r=this.options).onLoad)==null||n.call(r,i)},t.onerror=i=>{var r,n;if(this.state="error",this.overlayEl&&!this.options.disableBroken){this.overlayEl.classList.add("interactive");const e=this.options.retry&&(this.options.maxRetries===void 0||this.currentAttempt<this.options.maxRetries);if(this.overlayEl.innerHTML=`
+					<div class="lazy-image-broken-container">
+						${m}
+						<span>Failed to load image</span>
+						${e?'<button type="button" class="lazy-image-retry-button">Retry</button>':""}
+					</div>
+				`,e){const s=this.overlayEl.querySelector(".lazy-image-retry-button");s==null||s.addEventListener("click",()=>this.retry())}}(n=(r=this.options).onError)==null||n.call(r,i)}}retry(){var i,r;this.currentAttempt++,(r=(i=this.options).onRetry)==null||r.call(i,this.currentAttempt);const t=this.options.disableLoader??this.options.disabeLoader??!1;this.overlayEl&&(this.overlayEl.classList.remove("interactive"),this.overlayEl.innerHTML=t?"":`<div class="lazy-image-loader-container">${h}</div>`),this.loadMainImage()}getState(){return this.state}update(t){this.options={...this.options,...t},this.currentAttempt=0,this.destroy(),this.init()}destroy(){this.unobserve&&(this.unobserve(),this.unobserve=null),this.container.innerHTML="",this.wrapperEl=null,this.placeholderImgEl=null,this.mainImgEl=null,this.pictureEl=null,this.overlayEl=null,this.schemaScriptEl=null}}function w(a,t){return new y(a,t)}const k=typeof HTMLElement<"u"?HTMLElement:class{};class f extends k{constructor(){super();o(this,"shadow");o(this,"unobserve",null);o(this,"currentAttempt",0);o(this,"wrapperEl");o(this,"placeholderEl");o(this,"mainImgEl");o(this,"overlayEl");typeof window<"u"&&typeof this.attachShadow=="function"&&(this.shadow=this.attachShadow({mode:"open"}))}static get observedAttributes(){return["src","alt","placeholder","aspect-ratio","srcset","sizes","width","height","object-fit","object-position","root-margin","threshold","native","fetchpriority","decoding","fade-duration","blur","background-color","disable-loader","disable-broken","retry","caption","title"]}connectedCallback(){if(this.render(),this.hasAttribute("native"))this.loadMainImage();else{const r=this.getAttribute("root-margin")||"200px",n=parseFloat(this.getAttribute("threshold")||"0.01");this.unobserve=E(this,e=>{this.dispatchEvent(new CustomEvent("lazyintersect",{detail:{entry:e}})),this.loadMainImage()},{rootMargin:r,threshold:n})}}disconnectedCallback(){this.unobserve&&(this.unobserve(),this.unobserve=null)}attributeChangedCallback(i,r,n){r!==n&&this.isConnected&&this.connectedCallback()}render(){const i=this.getAttribute("src")||"",r=this.getAttribute("alt")||"",n=this.getAttribute("placeholder"),e=this.getAttribute("aspect-ratio"),s=this.getAttribute("width"),l=this.getAttribute("height"),c=this.getAttribute("object-fit")||"cover",p=this.getAttribute("object-position")||"center",z=this.getAttribute("fade-duration")||"300",M=this.getAttribute("blur")||"12",C=this.getAttribute("background-color")||"#c2c2c224",S=this.hasAttribute("disable-loader"),j=this.getAttribute("decoding")||"async",I=this.getAttribute("fetchpriority"),L=this.getAttribute("caption"),N=this.hasAttribute("native"),$=this.getAttribute("srcset"),A=this.getAttribute("sizes"),R=`
+			:host {
+				display: inline-block;
+				width: 100%;
+				position: relative;
+				box-sizing: border-box;
+			}
+			.wrapper {
+				position: relative;
+				width: 100%;
+				overflow: hidden;
+				box-sizing: border-box;
+				background-color: ${C};
+				${e?`aspect-ratio: ${e};`:""}
+				${s?`width: ${s.endsWith("px")||s.endsWith("%")?s:s+"px"};`:""}
+				${l?`height: ${l.endsWith("px")||l.endsWith("%")?l:l+"px"};`:""}
+			}
+			.main-img {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: ${c};
+				object-position: ${p};
+				opacity: 0;
+				transition: opacity ${z}ms cubic-bezier(0.4, 0, 0.2, 1);
+				will-change: opacity;
+			}
+			.main-img.is-loaded {
+				opacity: 1;
+			}
+			.placeholder-img {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: ${c};
+				object-position: ${p};
+				filter: blur(${M}px);
+				transform: scale(1.06);
+				transition: opacity ${z}ms ease-out;
+				pointer-events: none;
+			}
+			.placeholder-img.is-hidden {
+				opacity: 0;
+				visibility: hidden;
+			}
+			.overlay {
+				position: absolute;
+				inset: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				pointer-events: none;
+				z-index: 2;
+			}
+			.overlay.interactive {
+				pointer-events: auto;
+			}
+			.spinner-wrap {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+				color: #629aa9;
+			}
+			.lazy-image-spinner {
+				width: 48px;
+				height: 48px;
+				animation: spin 1s linear infinite;
+			}
+			.lazy-image-spinner circle {
+				stroke: currentColor;
+				stroke-dasharray: 113.1 39.7;
+				stroke-width: 4;
+				fill: none;
+			}
+			@keyframes spin {
+				to { transform: rotate(360deg); }
+			}
+			.broken-wrap {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				gap: 8px;
+				padding: 16px;
+				font-family: monospace;
+				font-size: 11px;
+				color: #4b5563;
+				text-align: center;
+			}
+			.broken-icon {
+				width: 40px;
+				height: 40px;
+				fill: currentColor;
+				opacity: 0.65;
+			}
+			.retry-btn {
+				margin-top: 4px;
+				padding: 4px 10px;
+				font-size: 11px;
+				color: #fff;
+				background-color: #629aa9;
+				border: none;
+				border-radius: 4px;
+				cursor: pointer;
+			}
+			.caption {
+				display: block;
+				margin-top: 6px;
+				font-size: 0.875rem;
+				color: #4b5563;
+			}
+		`;this.shadow.innerHTML=`
+			<style>${R}</style>
+			<div class="wrapper">
+				${n?`<img class="placeholder-img" src="${n}" alt="" aria-hidden="true" decoding="async" />`:""}
+				<div class="overlay">
+					${S?"":`<slot name="loader"><div class="spinner-wrap">${h}</div></slot>`}
+				</div>
+				<img class="main-img" alt="${r}" ${N?`loading="lazy" src="${i}"`:""} ${$?`srcset="${$}"`:""} ${A?`sizes="${A}"`:""} decoding="${j}" ${I?`fetchpriority="${I}"`:""} />
+			</div>
+			${L?`<figcaption class="caption"><slot name="caption">${L}</slot></figcaption>`:""}
+		`,this.wrapperEl=this.shadow.querySelector(".wrapper"),this.placeholderEl=this.shadow.querySelector(".placeholder-img"),this.mainImgEl=this.shadow.querySelector(".main-img"),this.overlayEl=this.shadow.querySelector(".overlay")}loadMainImage(){const i=this.getAttribute("src");if(!i||!this.mainImgEl)return;const r=new Image,n=this.getAttribute("srcset"),e=this.getAttribute("sizes");n&&(r.srcset=n),e&&(r.sizes=e),r.src=i,r.onload=s=>{this.mainImgEl.src=i,n&&(this.mainImgEl.srcset=n),e&&(this.mainImgEl.sizes=e),this.mainImgEl.classList.add("is-loaded"),this.placeholderEl&&this.placeholderEl.classList.add("is-hidden"),this.overlayEl&&(this.overlayEl.innerHTML=""),this.dispatchEvent(new CustomEvent("lazyload",{detail:{event:s}}))},r.onerror=s=>{const l=this.hasAttribute("disable-broken"),c=this.hasAttribute("retry");if(this.overlayEl&&!l&&(this.overlayEl.classList.add("interactive"),this.overlayEl.innerHTML=`
+					<slot name="broken">
+						<div class="broken-wrap">
+							<div class="broken-icon">${m}</div>
+							<span>Failed to load image</span>
+							${c?'<button type="button" class="retry-btn">Retry</button>':""}
+						</div>
+					</slot>
+				`,c)){const p=this.overlayEl.querySelector(".retry-btn");p==null||p.addEventListener("click",()=>this.retry())}this.dispatchEvent(new CustomEvent("lazyerror",{detail:{event:s}}))}}retry(){this.currentAttempt++,this.dispatchEvent(new CustomEvent("lazyretry",{detail:{attempt:this.currentAttempt}}));const i=this.hasAttribute("disable-loader");this.overlayEl&&(this.overlayEl.classList.remove("interactive"),this.overlayEl.innerHTML=i?"":`<slot name="loader"><div class="spinner-wrap">${h}</div></slot>`),this.loadMainImage()}}function b(a="lazy-image"){typeof window<"u"&&"customElements"in window&&(customElements.get(a)||customElements.define(a,f))}if(typeof window<"u"&&b(),b(),typeof window<"u"){const a=window;a.LazyImage=y,a.createLazyImage=w,a.createImageSchema=u,a.LazyImageElement=f}return d.BROKEN_SVG=m,d.LazyImage=y,d.LazyImageElement=f,d.SPINNER_SVG=h,d.createImageSchema=u,d.createLazyImage=w,d.defineLazyImageElement=b,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d})({});

package/dist/browser.js

@@ -0,0 +1,13 @@
+import { LazyImage, createLazyImage, createImageSchema, SPINNER_SVG, BROKEN_SVG } from './vanilla/index.js';
+import { LazyImageElement, defineLazyImageElement } from './element/index.js';
+export { LazyImage, createLazyImage, createImageSchema, LazyImageElement, defineLazyImageElement, SPINNER_SVG, BROKEN_SVG };
+// Auto-register <lazy-image> custom element
+defineLazyImageElement();
+// Attach to window for direct <script> tag usage
+if (typeof window !== 'undefined') {
+    const w = window;
+    w.LazyImage = LazyImage;
+    w.createLazyImage = createLazyImage;
+    w.createImageSchema = createImageSchema;
+    w.LazyImageElement = LazyImageElement;
+}