visionary-image 1.0.4 → 1.1.0-pre.0

package/README.md

@@ -9,7 +9,7 @@ React image component with built-in Blurhash placeholders for better UX and Core
 - **Easy Blurhash:** Get started with Blurhash in 60 seconds.
 - **Layout stability**: Eliminates Cumulative Layout Shift (CLS) with true-to-size, responsive placeholders.
 - **Automatic lazy loading**: Off-screen images are deferred, reducing initial pageload size and optimizing Interaction to Next Paint (INP).
-- **Lighning-fast previews**: Renders placeholders early (by initial DOM layout) using URL-embedded Blurhash data, powered by [`visionary-url`](https://github.com/visionary-ux/visionary-url).
+- **Lighning-fast previews**: Renders placeholders early (by initial DOM layout) using URL-embedded Blurhash data, powered by [`blurhash-url`](https://github.com/visionary-ux/blurhash-url).
 - **Framework tested**: Compatible with Remix, Next.js, and Vite and supports both client and server-side rendering (SSR, SSG).
 - **Additional features**: Prevent image dragging; prevent user selecting image
 - **Developer friendly**: Written in Typescript and [unit tested](./src/components/Image/__test__/).
@@ -32,45 +32,46 @@ npm install --save visionary-image
 
 ## Usage
 
-Begin by creating a Visionary image URL. This is then passed to the `src` prop of the Image component.
+Begin by creating a Blurhash URL. This is then passed to the `src` prop of the Image component.
 
-### Creating a Visionary Image URL
+### Creating a Blurhash URL
 
-There are several ways to create a Visionary URL.
+There are several ways to create a Blurhash URL.
 
-1. Use the [Visionary URL Maker](https://visionary.cloud/url-maker) for public image URLs
+1. Use the [Blurhash URL Maker](https://visionary.cloud/url-maker) for public image URLs
 2. Use the [Drag & Drop Blurhash Generator](https://visionary.cloud/image-to-blurhash) for local image files
-3. Use [visionary-url](https://github.com/visionary-ux/visionary-url) to programmatically generate a URL
+3. Use [blurhash-url](https://github.com/visionary-ux/blurhash-url) to programmatically generate a URL
 
 ### Render Image
 
 ```tsx
 import { Image } from "visionary-image";
 
-const ImageDetails = () => <Image alt="..." src="<Visionary URL>" />;
+const ImageDetails = () => <Image alt="..." src="<Blurhash URL>" />;
 ```
 
 ## Component Props
 
-| Name                              | Description                                                                                                                                                                              |
-| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `alt` <br/> string                | Image `alt` tag. Adding alt text to images is highly recommended to accommodate accessible devices and improve discoverability.                                                          |
-| `bgColorAlpha` <br/> number       | Base layer (background color) alpha channel.<br /> Default: `0.7`                                                                                                                        |
-| `className` <br/> string          | Classname applied to the container `div` or the fallback `img` element.                                                                                                                  |
-| `debug` <br/> boolean             | Prints handy debug info to the console (Visionary URL data, render times).                                                                                                               |
-| `disableBlurLayer` <br/> boolean  | Disables rendering of the blur (canvas) layer.                                                                                                                                           |
-| `disableImageLayer` <br/> boolean | Disables rendering of the image layer.                                                                                                                                                   |
-| `height` <br/>number, string      | If set, will override internally computed image height. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                     |
-| `hideImageLayer` <br/> boolean    | Hides the image layer, revealing the blur layer underneath.                                                                                                                              |
-| `lazy` <br/> boolean              | Should image load lazily. <br/> Default: `true`                                                                                                                                          |
-| `onClick` <br/> function          | Callback function to invoke when the image is clicked. function.                                                                                                                         |
-| `onError` <br/> function          | Error callback function.                                                                                                                                                                 |
-| `onLoad` <br/> function           | Image loaded callback function.                                                                                                                                                          |
-| `preventDrag` <br/>boolean        | Prevents user from dragging the image element.                                                                                                                                           |
-| `preventSelection` <br/>boolean   | Prevents user from highlighting the image element.                                                                                                                                       |
-| `punch` <br/>number               | Blurhash punch parameter.<br /> Default: `1`                                                                                                                                             |
-| `src` <br/>string                 | Visionary URL, Visionary Code, or ordinary image URL.<br/> If `src` contains Visionary data, placeholders will be rendered, otherwise falls back to an `img` element. <br/> **required** |
-| `width` <br/>number, string       | If set, will override internally computed image width. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                      |
+| Name                              | Description                                                                                                                                                                                |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `alt` <br/> string                | Image `alt` tag. Adding alt text to images is highly recommended to accommodate accessible devices and improve discoverability.                                                            |
+| `bgColorAlpha` <br/> number       | Base layer (background color) alpha channel.<br /> Default: `0.7`                                                                                                                          |
+| `className` <br/> string          | Classname applied to the container `div` or the fallback `img` element.                                                                                                                    |
+| `debug` <br/> boolean             | Prints handy debug info to the console (Blurhash URL data, render times).                                                                                                                  |
+| `disableBlurLayer` <br/> boolean  | Disables rendering of the blur (canvas) layer.                                                                                                                                             |
+| `disableImageLayer` <br/> boolean | Disables rendering of the image layer.                                                                                                                                                     |
+| `height` <br/>number, string      | If set, will override internally computed image height. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                       |
+| `hideImageLayer` <br/> boolean    | Hides the image layer, revealing the blur layer underneath.                                                                                                                                |
+| `lazy` <br/> boolean              | Should image load lazily. <br/> Default: `true`                                                                                                                                            |
+| `onClick` <br/> function          | Callback function to invoke when the image is clicked. function.                                                                                                                           |
+| `onError` <br/> function          | Error callback function.                                                                                                                                                                   |
+| `onLoad` <br/> function           | Image loaded callback function.                                                                                                                                                            |
+| `preventDrag` <br/>boolean        | Prevents user from dragging the image element.                                                                                                                                             |
+| `preventSelection` <br/>boolean   | Prevents user from highlighting the image element.                                                                                                                                         |
+| `priority` <br/>boolean           | Mark as priority image (above-the-fold). Sets `fetchpriority="high"` and `loading="eager"`. Use for LCP images.<br /> Default: `false`                                                     |
+| `punch` <br/>number               | Blurhash punch parameter.<br /> Default: `1`                                                                                                                                               |
+| `src` <br/>string                 | Blurhash URL, Visionary Code, or ordinary image URL.<br/> If `src` contains Blurhash URL data, placeholders will be rendered, otherwise falls back to an `img` element. <br/> **required** |
+| `width` <br/>number, string       | If set, will override internally computed image width. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                        |
 
 ## Relevant Questions
 
@@ -85,3 +86,10 @@ Canvas operations are highly efficient in modern browsers. Rendering the 24x24 p
 ### What is Blurhash and where can I learn more?
 
 Blurhash uses Discrete Cosine Transforms to represent a color-accurate image placeholder as a compact string (in 20-30 characters). Check out the official [Blurhash docs](https://github.com/woltapp/blurhash) for more info.
+
+## Related packages
+
+| Package                                                                    | Use for                                                            |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| **`visionary-image`** (this package)                                       | React apps (`<Image />`), or the `<visionary-image>` web component |
+| [`visionary-image-js`](https://github.com/visionary-ux/visionary-image-js) | Zero-config `<script>` / CDN, or framework-agnostic SSR HTML       |

package/dist/VisionaryImageElement-DvHh3Z7-.js

@@ -0,0 +1,100 @@
+import { c as e, n as t, o as n, s as r } from "./canvas-D7cApRRm.js";
+//#region src/lib/util.ts
+var i = (e, t) => `rgba(${e.r},${e.g},${e.b},${t})`, a = (e) => {
+	let t = e.replace(/^#/, "");
+	if (t.length !== 3 && t.length !== 6) return null;
+	t.length === 3 && (t = `${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}`);
+	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16);
+	return {
+		b: parseInt(t.slice(4, 6), 16),
+		g: r,
+		r: n
+	};
+}, o = null;
+function s() {
+	return o ||= new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			if (e.isIntersecting) {
+				let t = e.target;
+				t.renderBlurhashNow(), o?.unobserve(t);
+			}
+		});
+	}, { rootMargin: "200px" }), o;
+}
+var c = typeof HTMLElement < "u" ? HTMLElement : class {}, l = class extends c {
+	canvas = null;
+	img = null;
+	container = null;
+	blurhash = null;
+	hasRenderedBlurhash = !1;
+	static get observedAttributes() {
+		return [
+			"src",
+			"alt",
+			"lazy",
+			"priority"
+		];
+	}
+	connectedCallback() {
+		this.render();
+	}
+	disconnectedCallback() {
+		s().unobserve(this);
+	}
+	attributeChangedCallback() {
+		this.container && (this.hasRenderedBlurhash = !1, this.render());
+	}
+	renderBlurhashNow() {
+		this.hasRenderedBlurhash || !this.blurhash || !this.canvas || (this.renderBlurhashToCanvas(this.blurhash), this.hasRenderedBlurhash = !0);
+	}
+	render() {
+		let e = this.getAttribute("src");
+		if (!e) return;
+		let t = r(e);
+		if (!t) {
+			this.renderFallbackImage(e);
+			return;
+		}
+		let { fields: o } = t, { blurhash: c, sourceWidth: l, sourceHeight: u, bcc: d } = o, f = this.getAttribute("priority") === "true", p = !f && this.getAttribute("lazy") !== "false";
+		this.blurhash = c || null;
+		let m = l / u;
+		if (this.container = document.createElement("div"), this.container.style.cssText = `
+      position: relative;
+      width: 100%;
+      aspect-ratio: ${m};
+      overflow: hidden;
+    `, d) {
+			let e = a(d);
+			e && (this.container.style.backgroundColor = i(e, n));
+		}
+		c && (this.canvas = document.createElement("canvas"), this.canvas.width = 24, this.canvas.height = 24, this.canvas.style.cssText = "\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      ", this.container.appendChild(this.canvas), p ? s().observe(this) : (this.renderBlurhashToCanvas(c), this.hasRenderedBlurhash = !0)), this.img = document.createElement("img"), this.img.src = e, this.img.alt = this.getAttribute("alt") || "", this.img.loading = p ? "lazy" : "eager", f && (this.img.fetchPriority = "high"), this.img.style.cssText = "\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    ", this.img.onload = () => {
+			this.canvas && (this.canvas.style.opacity = "0", this.canvas.style.transition = "opacity 0.3s ease-out");
+		}, this.container.appendChild(this.img), this.innerHTML = "", this.appendChild(this.container);
+	}
+	renderBlurhashToCanvas(n) {
+		if (!this.canvas) return;
+		let r = this.canvas.getContext("2d");
+		if (!r) return;
+		let i = t(), a = `${n}:24:1`, o = i.get(a);
+		if (!o) try {
+			o = e(n, 24, 24, 1), i.set(a, o);
+		} catch (e) {
+			console.warn("Blurhash decode error:", e);
+			return;
+		}
+		let s = r.createImageData(24, 24);
+		s.data.set(o), r.putImageData(s, 0, 0);
+	}
+	renderFallbackImage(e) {
+		this.innerHTML = "";
+		let t = document.createElement("img");
+		t.src = e, t.alt = this.getAttribute("alt") || "";
+		let n = this.getAttribute("priority") === "true";
+		t.loading = n || this.getAttribute("lazy") === "false" ? "eager" : "lazy", n && (t.fetchPriority = "high"), t.style.cssText = "width: 100%; height: auto;", this.appendChild(t);
+	}
+};
+function u(e = "visionary-image") {
+	typeof HTMLElement > "u" || typeof customElements > "u" || customElements.get(e) || customElements.define(e, l);
+}
+//#endregion
+export { u as n, l as t };

package/dist/VisionaryImageElement-Dy9g5-P8.cjs

@@ -0,0 +1,17 @@
+const e=require("./canvas-CnN_nKut.cjs");var t=(e,t)=>`rgba(${e.r},${e.g},${e.b},${t})`,n=e=>{let t=e.replace(/^#/,``);if(t.length!==3&&t.length!==6)return null;t.length===3&&(t=`${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}`);let n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16);return{b:parseInt(t.slice(4,6),16),g:r,r:n}},r=null;function i(){return r||=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){let t=e.target;t.renderBlurhashNow(),r?.unobserve(t)}})},{rootMargin:`200px`}),r}var a=typeof HTMLElement<`u`?HTMLElement:class{},o=class extends a{canvas=null;img=null;container=null;blurhash=null;hasRenderedBlurhash=!1;static get observedAttributes(){return[`src`,`alt`,`lazy`,`priority`]}connectedCallback(){this.render()}disconnectedCallback(){i().unobserve(this)}attributeChangedCallback(){this.container&&(this.hasRenderedBlurhash=!1,this.render())}renderBlurhashNow(){this.hasRenderedBlurhash||!this.blurhash||!this.canvas||(this.renderBlurhashToCanvas(this.blurhash),this.hasRenderedBlurhash=!0)}render(){let r=this.getAttribute(`src`);if(!r)return;let a=e.s(r);if(!a){this.renderFallbackImage(r);return}let{fields:o}=a,{blurhash:s,sourceWidth:c,sourceHeight:l,bcc:u}=o,d=this.getAttribute(`priority`)===`true`,f=!d&&this.getAttribute(`lazy`)!==`false`;this.blurhash=s||null;let p=c/l;if(this.container=document.createElement(`div`),this.container.style.cssText=`
+      position: relative;
+      width: 100%;
+      aspect-ratio: ${p};
+      overflow: hidden;
+    `,u){let r=n(u);r&&(this.container.style.backgroundColor=t(r,e.o))}s&&(this.canvas=document.createElement(`canvas`),this.canvas.width=24,this.canvas.height=24,this.canvas.style.cssText=`
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      `,this.container.appendChild(this.canvas),f?i().observe(this):(this.renderBlurhashToCanvas(s),this.hasRenderedBlurhash=!0)),this.img=document.createElement(`img`),this.img.src=r,this.img.alt=this.getAttribute(`alt`)||``,this.img.loading=f?`lazy`:`eager`,d&&(this.img.fetchPriority=`high`),this.img.style.cssText=`
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    `,this.img.onload=()=>{this.canvas&&(this.canvas.style.opacity=`0`,this.canvas.style.transition=`opacity 0.3s ease-out`)},this.container.appendChild(this.img),this.innerHTML=``,this.appendChild(this.container)}renderBlurhashToCanvas(t){if(!this.canvas)return;let n=this.canvas.getContext(`2d`);if(!n)return;let r=e.n(),i=`${t}:24:1`,a=r.get(i);if(!a)try{a=e.c(t,24,24,1),r.set(i,a)}catch(e){console.warn(`Blurhash decode error:`,e);return}let o=n.createImageData(24,24);o.data.set(a),n.putImageData(o,0,0)}renderFallbackImage(e){this.innerHTML=``;let t=document.createElement(`img`);t.src=e,t.alt=this.getAttribute(`alt`)||``;let n=this.getAttribute(`priority`)===`true`;t.loading=n||this.getAttribute(`lazy`)===`false`?`eager`:`lazy`,n&&(t.fetchPriority=`high`),t.style.cssText=`width: 100%; height: auto;`,this.appendChild(t)}};function s(e=`visionary-image`){typeof HTMLElement>`u`||typeof customElements>`u`||customElements.get(e)||customElements.define(e,o)}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/blurhash.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./canvas-CnN_nKut.cjs");exports.getOrDecodePixels=e.t,exports.getPixelCache=e.n,exports.getRenderedCanvasSet=e.r,exports.initBlurhashCanvases=e.i,exports.initOnDOMLoaded=e.a;

package/dist/blurhash.d.cts

@@ -0,0 +1,50 @@
+/** Get or decode blurhash pixels, using cache when available */
+export declare function getOrDecodePixels(blurhash: string, size: number, punch: number): Uint8ClampedArray | null;
+
+/** Returns the global pixel cache */
+export declare function getPixelCache(): Map<string, Uint8ClampedArray>;
+
+/** Returns the global set tracking rendered canvas keys */
+export declare function getRenderedCanvasSet(): Set<string>;
+
+/**
+ * Finds server-rendered canvas elements and renders blurhash to them.
+ * Uses IntersectionObserver: above-fold renders immediately, below-fold defers.
+ *
+ * Exported via `visionary-image/blurhash` for manual control:
+ * ```js
+ * import { initBlurhashCanvases } from 'visionary-image/blurhash';
+ * document.addEventListener('DOMContentLoaded', () => initBlurhashCanvases());
+ * ```
+ */
+export declare function initBlurhashCanvases(debug?: boolean): void;
+
+/**
+ * Runs initBlurhashCanvases() at DOMContentLoaded (or immediately if already loaded).
+ * Called by the loader entry point (`visionary-image/loader`).
+ *
+ * Usage:
+ * ```js
+ * import 'visionary-image/loader';
+ * ```
+ */
+export declare function initOnDOMLoaded(debug?: boolean): void;
+
+export { }
+
+/**
+ * Blurhash rendering utilities shared across entry points:
+ *
+ * - `visionary-image` (React component) - uses getRenderedCanvasSet(), getOrDecodePixels()
+ * - `visionary-image/loader` (early loader) - calls initOnDOMLoaded()
+ * - `visionary-image/blurhash` (manual) - exports initBlurhashCanvases()
+ * - `visionary-image/web-component` - uses getPixelCache()
+ */
+declare global {
+    interface Window {
+        /** Set of canvas keys that have been rendered */
+        V7Y_CANVAS_RENDERED?: Set<string>;
+        /** Cache of decoded blurhash pixels, keyed by "blurhash:size:punch" */
+        V7Y_PIXEL_CACHE?: Map<string, Uint8ClampedArray>;
+    }
+}

package/dist/blurhash.d.ts

@@ -0,0 +1,50 @@
+/** Get or decode blurhash pixels, using cache when available */
+export declare function getOrDecodePixels(blurhash: string, size: number, punch: number): Uint8ClampedArray | null;
+
+/** Returns the global pixel cache */
+export declare function getPixelCache(): Map<string, Uint8ClampedArray>;
+
+/** Returns the global set tracking rendered canvas keys */
+export declare function getRenderedCanvasSet(): Set<string>;
+
+/**
+ * Finds server-rendered canvas elements and renders blurhash to them.
+ * Uses IntersectionObserver: above-fold renders immediately, below-fold defers.
+ *
+ * Exported via `visionary-image/blurhash` for manual control:
+ * ```js
+ * import { initBlurhashCanvases } from 'visionary-image/blurhash';
+ * document.addEventListener('DOMContentLoaded', () => initBlurhashCanvases());
+ * ```
+ */
+export declare function initBlurhashCanvases(debug?: boolean): void;
+
+/**
+ * Runs initBlurhashCanvases() at DOMContentLoaded (or immediately if already loaded).
+ * Called by the loader entry point (`visionary-image/loader`).
+ *
+ * Usage:
+ * ```js
+ * import 'visionary-image/loader';
+ * ```
+ */
+export declare function initOnDOMLoaded(debug?: boolean): void;
+
+export { }
+
+/**
+ * Blurhash rendering utilities shared across entry points:
+ *
+ * - `visionary-image` (React component) - uses getRenderedCanvasSet(), getOrDecodePixels()
+ * - `visionary-image/loader` (early loader) - calls initOnDOMLoaded()
+ * - `visionary-image/blurhash` (manual) - exports initBlurhashCanvases()
+ * - `visionary-image/web-component` - uses getPixelCache()
+ */
+declare global {
+    interface Window {
+        /** Set of canvas keys that have been rendered */
+        V7Y_CANVAS_RENDERED?: Set<string>;
+        /** Cache of decoded blurhash pixels, keyed by "blurhash:size:punch" */
+        V7Y_PIXEL_CACHE?: Map<string, Uint8ClampedArray>;
+    }
+}

package/dist/blurhash.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, r, t as i } from "./canvas-D7cApRRm.js";
+export { i as getOrDecodePixels, n as getPixelCache, r as getRenderedCanvasSet, t as initBlurhashCanvases, e as initOnDOMLoaded };

package/dist/canvas-CnN_nKut.cjs

@@ -0,0 +1 @@
+var e=(e,t,n)=>{let r=0;for(;t<n;)r=r*83+`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~`.indexOf(e[t++]);return r},t=Math.pow,n=Math.PI,r=3294.6,i=269.025,a=e=>e>10.31475?t(e/i+.052132,2.4):e/r,o=e=>~~(e>1227e-8?i*t(e,.416666)-13.025:e*r+1),s=4096,c=new Uint8ClampedArray(4097);for(let e=0;e<=s;e++)c[e]=o(e/s);var l=e=>e<=0?0:e>=1?255:c[e*s+.5|0],u=e=>(e<0?-1:1)*e*e,d=e=>{for(e+=n/2;e>n;)e-=n*2;let t=1.27323954*e-.405284735*u(e);return .225*(u(t)-t)+t};function f(t){let n=e(t,2,6);return[n>>16,n>>8&255,n&255]}function p(t,r,i,o){let s=e(t,0,1),c=s%9+1,p=~~(s/9)+1,m=c*p,h,g,_,v,y,b,x,S,C,w,T,E,D=(e(t,1,2)+1)/13446*(o|1),O=new Float64Array(m*3),k=f(t);for(h=0;h<3;h++)O[h]=a(k[h]);for(h=1;h<m;h++)E=e(t,4+h*2,6+h*2),O[h*3]=u(~~(E/361)-9)*D,O[h*3+1]=u(~~(E/19)%19-9)*D,O[h*3+2]=u(E%19-9)*D;let A=new Float64Array(p*i),j=new Float64Array(c*r);for(g=0;g<p;g++)for(v=0;v<i;v++)A[g*i+v]=d(n*v*g/i);for(h=0;h<c;h++)for(_=0;_<r;_++)j[h*r+_]=d(n*_*h/r);let M=r*4,N=new Uint8ClampedArray(M*i),P=new Float64Array(c*3);for(v=0;v<i;v++){for(h=0;h<c;h++){for(y=b=x=0,g=0;g<p;g++)C=A[g*i+v],w=(h+g*c)*3,y+=O[w]*C,b+=O[w+1]*C,x+=O[w+2]*C;P[h*3]=y,P[h*3+1]=b,P[h*3+2]=x}for(_=0;_<r;_++){for(y=b=x=0,h=0;h<c;h++)S=j[h*r+_],w=h*3,y+=P[w]*S,b+=P[w+1]*S,x+=P[w+2]*S;T=4*_+v*M,N[T]=l(y),N[T+1]=l(b),N[T+2]=l(x),N[T+3]=255}}return N}var m=(e=>(e.AUTO=`auto`,e.AVIF=`avif`,e.JPEG=`jpeg`,e.WEBP=`webp`,e))(m||{}),h=(e=>(e.xs=`xs`,e.sm=`sm`,e.md=`md`,e.lg=`lg`,e.xl=`xl`,e.xxl=`xxl`,e[`4k`]=`4k`,e[`5k`]=`5k`,e.full=`full`,e))(h||{}),g=(e=>(e.DEBUG=`debug`,e.DOWNLOAD=`download`,e.FOLLOW=`follow`,e))(g||{});m.AUTO,h.lg;var _={[h.xs]:160,[h.sm]:320,[h.md]:640,[h.lg]:1280,[h.xl]:1920,[h.xxl]:2560,[h[`4k`]]:3840,[h[`5k`]]:5120,[h.full]:0};Object.keys(_).reduce((e,t)=>{let n=t,r=_[n];return r&&(e[r]=n),e},{});var v=null,y=()=>{if(typeof Buffer<`u`&&typeof Buffer.from==`function`)return`buffer`;if(typeof TextEncoder<`u`&&typeof TextDecoder<`u`&&typeof btoa==`function`&&typeof atob==`function`)return`text-encoding`;throw Error(`No UTF-8 base64 implementation available`)},b=()=>(v===null&&(v=y()),v),x=e=>{let t=new Uint8Array(e.length);for(let n=0;n<e.length;n++)t[n]=e.charCodeAt(n);return t},S=e=>{let t=e.length%4;return t===0?e:e+`=`.repeat(4-t)},C=e=>Buffer.from(e,`base64`).toString(`utf8`),w=e=>new TextDecoder().decode(x(atob(S(e)))),T=e=>{switch(b()){case`buffer`:return C(e);case`text-encoding`:return w(e)}},E=e=>{if(typeof e!=`string`)throw Error(`decodeBase64Url: input must be a string`);return T(D(e))},D=e=>e.replace(/-/g,`+`).replace(/_/g,`/`),O=class extends Error{message=`invalid blurhash component dimensions`},k=e=>e===g.DEBUG,A=e=>e===g.DOWNLOAD,j=e=>e===g.FOLLOW,M=e=>Object.values(m).includes(e),N=e=>Object.values(h).includes(e),P=(e=[])=>{let t={};for(let n of e)N(n)?t.size=n:k(n)?t.debug=!0:A(n)?t.download=!0:j(n)?t.follow=!0:M(n)&&(t.format=n);return t},F=e=>e.filter(Boolean),I=(e=``)=>/^[A-Za-z0-9_-]*$/.test(e),L=e=>Number.isInteger(e)&&e>0,R=e=>{if(!e||e.length<6)throw new O;let t=z(e[0]);if(t<0)throw new O;let n=t%9+1,r=Math.floor(t/9)+1,i=4+2*n*r;if(e.length!==i)throw new O;return{xComponents:n,yComponents:r}},z=e=>`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~`.indexOf(e),B=e=>{if(typeof e!=`string`)return null;let t=e.trim();if(!t.length||!I(t))return null;let n=E(t);if(!n)return null;let r=n.split(`!`);if(r.length<3||r.length>6)return null;let[i,a,o,s,c,l]=r,u=i.trim();if(!u.length)return null;let d=Number(a.trim()),f=Number(o.trim());if(!L(d)||!L(f))return null;let p={sourceHeight:f,sourceWidth:d,url:u};if(s&&(p.bcc=s),c){p.blurhash=c;try{let e=R(c);p.blurhashX=e.xComponents,p.blurhashY=e.yComponents}catch{return null}}return l&&(p.altText=l),p},V=e=>{if(I(e)){let t=B(e);if(t)return{fields:t,options:{}}}return H(e)},H=e=>{let t=e?.trim();if(!t)return null;try{let e=U(t);if(!e)return null;let{code:n,optionTokens:r}=e,i=B(n);return i?{fields:i,options:P(r)}:null}catch{}return null},U=e=>{try{let t=F(new URL(e).pathname.split(`/`));if(t[0]!==`image`||![3,4].includes(t.length))throw Error(`Unrecognized URL`);let n=t[1].trim();if(!n.length||!I(n))throw Error(`URL is not formatted as base64url`);return t.length===4?{code:n,optionTokens:t[2].split(`,`)}:{code:n,optionTokens:[]}}catch{return null}return null},W=.7;h.lg,process.env.NODE_ENV;function G(){return typeof window>`u`?new Set:(window.V7Y_CANVAS_RENDERED||(window.V7Y_CANVAS_RENDERED=new Set),window.V7Y_CANVAS_RENDERED)}function K(){return typeof window>`u`?new Map:(window.V7Y_PIXEL_CACHE||(window.V7Y_PIXEL_CACHE=new Map),window.V7Y_PIXEL_CACHE)}function q(e,t,n){return`${e}:${t}:${n}`}function J(e,t,n){let r=q(e,t,n),i=K(),a=i.get(r);if(a)return a;try{let a=p(e,t,t,n);return i.set(r,a),a}catch(e){return console.warn(`Blurhash decode error:`,e),null}}var Y=null,X=!1;function Z(){return Y||=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){let t=e.target;Q(t,X),Y?.unobserve(t)}})},{rootMargin:`200px`}),Y}function Q(e,t){let n=e.dataset.v7yKey;if(!n)return;let r=G();if(r.has(n)){t&&console.log(`[visionary-loader] Canvas already rendered, skipping`);return}let i=e.parentElement?.querySelector(`img`);if(!i?.src){t&&console.log(`[visionary-loader] Canvas has no sibling img, skipping`);return}let a=V(i.src);if(!a?.fields?.blurhash){t&&console.log(`[visionary-loader] Sibling img is not a Blurhash URL, skipping`);return}let{blurhash:o}=a.fields;t&&console.log(`[visionary-loader] Rendering canvas:`,{blurhash:o.slice(0,20)+`...`,punch:1,size:24});let s=J(o,24,1);if(!s)return;let c=e.getContext(`2d`);if(!c)return;let l=c.createImageData(24,24);l.data.set(s),c.putImageData(l,0,0),r.add(n),t&&console.log(`[visionary-loader] Canvas rendered at ${performance.now().toFixed(1)}ms`)}function $(e=!1){X=e;let t=document.querySelectorAll(`canvas[data-v7y-key]`);e&&console.log(`[visionary-loader] Found ${t.length} canvas(es) with data-v7y-key`);let n=Z();t.forEach(e=>{n.observe(e)})}function ee(e=!1){if(typeof document>`u`)return;let t=()=>{e&&console.log(`[visionary-loader] initOnDOMLoaded running at ${performance.now().toFixed(1)}ms, readyState: ${document.readyState}`),$(e)};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,t):t()}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return ee}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return G}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return V}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return J}});

package/dist/canvas-D7cApRRm.js

@@ -0,0 +1,245 @@
+//#region node_modules/.pnpm/fast-blurhash@1.2.0/node_modules/fast-blurhash/index.js
+var e = (e, t, n) => {
+	let r = 0;
+	for (; t < n;) r = r * 83 + "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".indexOf(e[t++]);
+	return r;
+}, t = Math.pow, n = Math.PI, r = 3294.6, i = 269.025, a = (e) => e > 10.31475 ? t(e / i + .052132, 2.4) : e / r, o = (e) => ~~(e > 1227e-8 ? i * t(e, .416666) - 13.025 : e * r + 1), s = 4096, c = /* @__PURE__ */ new Uint8ClampedArray(4097);
+for (let e = 0; e <= s; e++) c[e] = o(e / s);
+var l = (e) => e <= 0 ? 0 : e >= 1 ? 255 : c[e * s + .5 | 0], u = (e) => (e < 0 ? -1 : 1) * e * e, d = (e) => {
+	for (e += n / 2; e > n;) e -= n * 2;
+	let t = 1.27323954 * e - .405284735 * u(e);
+	return .225 * (u(t) - t) + t;
+};
+function f(t) {
+	let n = e(t, 2, 6);
+	return [
+		n >> 16,
+		n >> 8 & 255,
+		n & 255
+	];
+}
+function p(t, r, i, o) {
+	let s = e(t, 0, 1), c = s % 9 + 1, p = ~~(s / 9) + 1, m = c * p, h, g, _, v, y, b, x, S, C, w, T, E, D = (e(t, 1, 2) + 1) / 13446 * (o | 1), O = new Float64Array(m * 3), k = f(t);
+	for (h = 0; h < 3; h++) O[h] = a(k[h]);
+	for (h = 1; h < m; h++) E = e(t, 4 + h * 2, 6 + h * 2), O[h * 3] = u(~~(E / 361) - 9) * D, O[h * 3 + 1] = u(~~(E / 19) % 19 - 9) * D, O[h * 3 + 2] = u(E % 19 - 9) * D;
+	let A = new Float64Array(p * i), j = new Float64Array(c * r);
+	for (g = 0; g < p; g++) for (v = 0; v < i; v++) A[g * i + v] = d(n * v * g / i);
+	for (h = 0; h < c; h++) for (_ = 0; _ < r; _++) j[h * r + _] = d(n * _ * h / r);
+	let M = r * 4, N = new Uint8ClampedArray(M * i), P = new Float64Array(c * 3);
+	for (v = 0; v < i; v++) {
+		for (h = 0; h < c; h++) {
+			for (y = b = x = 0, g = 0; g < p; g++) C = A[g * i + v], w = (h + g * c) * 3, y += O[w] * C, b += O[w + 1] * C, x += O[w + 2] * C;
+			P[h * 3] = y, P[h * 3 + 1] = b, P[h * 3 + 2] = x;
+		}
+		for (_ = 0; _ < r; _++) {
+			for (y = b = x = 0, h = 0; h < c; h++) S = j[h * r + _], w = h * 3, y += P[w] * S, b += P[w + 1] * S, x += P[w + 2] * S;
+			T = 4 * _ + v * M, N[T] = l(y), N[T + 1] = l(b), N[T + 2] = l(x), N[T + 3] = 255;
+		}
+	}
+	return N;
+}
+//#endregion
+//#region node_modules/.pnpm/blurhash-url@1.4.0/node_modules/blurhash-url/dist/constants.js
+var m = /* @__PURE__ */ ((e) => (e.AUTO = "auto", e.AVIF = "avif", e.JPEG = "jpeg", e.WEBP = "webp", e))(m || {}), h = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e["4k"] = "4k", e["5k"] = "5k", e.full = "full", e))(h || {}), g = /* @__PURE__ */ ((e) => (e.DEBUG = "debug", e.DOWNLOAD = "download", e.FOLLOW = "follow", e))(g || {});
+m.AUTO, h.lg;
+var _ = {
+	[h.xs]: 160,
+	[h.sm]: 320,
+	[h.md]: 640,
+	[h.lg]: 1280,
+	[h.xl]: 1920,
+	[h.xxl]: 2560,
+	[h["4k"]]: 3840,
+	[h["5k"]]: 5120,
+	[h.full]: 0
+};
+Object.keys(_).reduce((e, t) => {
+	let n = t, r = _[n];
+	return r && (e[r] = n), e;
+}, {});
+//#endregion
+//#region node_modules/.pnpm/visionary-base64url@0.1.4/node_modules/visionary-base64url/dist/index.js
+var v = null, y = () => {
+	if (typeof Buffer < "u" && typeof Buffer.from == "function") return "buffer";
+	if (typeof TextEncoder < "u" && typeof TextDecoder < "u" && typeof btoa == "function" && typeof atob == "function") return "text-encoding";
+	throw Error("No UTF-8 base64 implementation available");
+}, b = () => (v === null && (v = y()), v), x = (e) => {
+	let t = new Uint8Array(e.length);
+	for (let n = 0; n < e.length; n++) t[n] = e.charCodeAt(n);
+	return t;
+}, S = (e) => {
+	let t = e.length % 4;
+	return t === 0 ? e : e + "=".repeat(4 - t);
+}, C = (e) => Buffer.from(e, "base64").toString("utf8"), w = (e) => new TextDecoder().decode(x(atob(S(e)))), T = (e) => {
+	switch (b()) {
+		case "buffer": return C(e);
+		case "text-encoding": return w(e);
+	}
+}, E = (e) => {
+	if (typeof e != "string") throw Error("decodeBase64Url: input must be a string");
+	return T(D(e));
+}, D = (e) => e.replace(/-/g, "+").replace(/_/g, "/"), O = class extends Error {
+	message = "invalid blurhash component dimensions";
+}, k = (e) => e === g.DEBUG, A = (e) => e === g.DOWNLOAD, j = (e) => e === g.FOLLOW, M = (e) => Object.values(m).includes(e), N = (e) => Object.values(h).includes(e), P = (e = []) => {
+	let t = {};
+	for (let n of e) N(n) ? t.size = n : k(n) ? t.debug = !0 : A(n) ? t.download = !0 : j(n) ? t.follow = !0 : M(n) && (t.format = n);
+	return t;
+}, F = (e) => e.filter(Boolean), I = (e = "") => /^[A-Za-z0-9_-]*$/.test(e), L = (e) => Number.isInteger(e) && e > 0, R = (e) => {
+	if (!e || e.length < 6) throw new O();
+	let t = z(e[0]);
+	if (t < 0) throw new O();
+	let n = t % 9 + 1, r = Math.floor(t / 9) + 1, i = 4 + 2 * n * r;
+	if (e.length !== i) throw new O();
+	return {
+		xComponents: n,
+		yComponents: r
+	};
+}, z = (e) => "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".indexOf(e), B = (e) => {
+	if (typeof e != "string") return null;
+	let t = e.trim();
+	if (!t.length || !I(t)) return null;
+	let n = E(t);
+	if (!n) return null;
+	let r = n.split("!");
+	if (r.length < 3 || r.length > 6) return null;
+	let [i, a, o, s, c, l] = r, u = i.trim();
+	if (!u.length) return null;
+	let d = Number(a.trim()), f = Number(o.trim());
+	if (!L(d) || !L(f)) return null;
+	let p = {
+		sourceHeight: f,
+		sourceWidth: d,
+		url: u
+	};
+	if (s && (p.bcc = s), c) {
+		p.blurhash = c;
+		try {
+			let e = R(c);
+			p.blurhashX = e.xComponents, p.blurhashY = e.yComponents;
+		} catch {
+			return null;
+		}
+	}
+	return l && (p.altText = l), p;
+}, V = (e) => {
+	if (I(e)) {
+		let t = B(e);
+		if (t) return {
+			fields: t,
+			options: {}
+		};
+	}
+	return H(e);
+}, H = (e) => {
+	let t = e?.trim();
+	if (!t) return null;
+	try {
+		let e = U(t);
+		if (!e) return null;
+		let { code: n, optionTokens: r } = e, i = B(n);
+		return i ? {
+			fields: i,
+			options: P(r)
+		} : null;
+	} catch {}
+	return null;
+}, U = (e) => {
+	try {
+		let t = F(new URL(e).pathname.split("/"));
+		if (t[0] !== "image" || ![3, 4].includes(t.length)) throw Error("Unrecognized URL");
+		let n = t[1].trim();
+		if (!n.length || !I(n)) throw Error("URL is not formatted as base64url");
+		return t.length === 4 ? {
+			code: n,
+			optionTokens: t[2].split(",")
+		} : {
+			code: n,
+			optionTokens: []
+		};
+	} catch {
+		return null;
+	}
+	return null;
+}, W = .7;
+h.lg, process.env.NODE_ENV;
+//#endregion
+//#region src/lib/canvas.ts
+function G() {
+	return typeof window > "u" ? /* @__PURE__ */ new Set() : (window.V7Y_CANVAS_RENDERED || (window.V7Y_CANVAS_RENDERED = /* @__PURE__ */ new Set()), window.V7Y_CANVAS_RENDERED);
+}
+function K() {
+	return typeof window > "u" ? /* @__PURE__ */ new Map() : (window.V7Y_PIXEL_CACHE || (window.V7Y_PIXEL_CACHE = /* @__PURE__ */ new Map()), window.V7Y_PIXEL_CACHE);
+}
+function q(e, t, n) {
+	return `${e}:${t}:${n}`;
+}
+function J(e, t, n) {
+	let r = q(e, t, n), i = K(), a = i.get(r);
+	if (a) return a;
+	try {
+		let a = p(e, t, t, n);
+		return i.set(r, a), a;
+	} catch (e) {
+		return console.warn("Blurhash decode error:", e), null;
+	}
+}
+var Y = null, X = !1;
+function Z() {
+	return Y ||= new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			if (e.isIntersecting) {
+				let t = e.target;
+				Q(t, X), Y?.unobserve(t);
+			}
+		});
+	}, { rootMargin: "200px" }), Y;
+}
+function Q(e, t) {
+	let n = e.dataset.v7yKey;
+	if (!n) return;
+	let r = G();
+	if (r.has(n)) {
+		t && console.log("[visionary-loader] Canvas already rendered, skipping");
+		return;
+	}
+	let i = e.parentElement?.querySelector("img");
+	if (!i?.src) {
+		t && console.log("[visionary-loader] Canvas has no sibling img, skipping");
+		return;
+	}
+	let a = V(i.src);
+	if (!a?.fields?.blurhash) {
+		t && console.log("[visionary-loader] Sibling img is not a Blurhash URL, skipping");
+		return;
+	}
+	let { blurhash: o } = a.fields;
+	t && console.log("[visionary-loader] Rendering canvas:", {
+		blurhash: o.slice(0, 20) + "...",
+		punch: 1,
+		size: 24
+	});
+	let s = J(o, 24, 1);
+	if (!s) return;
+	let c = e.getContext("2d");
+	if (!c) return;
+	let l = c.createImageData(24, 24);
+	l.data.set(s), c.putImageData(l, 0, 0), r.add(n), t && console.log(`[visionary-loader] Canvas rendered at ${performance.now().toFixed(1)}ms`);
+}
+function $(e = !1) {
+	X = e;
+	let t = document.querySelectorAll("canvas[data-v7y-key]");
+	e && console.log(`[visionary-loader] Found ${t.length} canvas(es) with data-v7y-key`);
+	let n = Z();
+	t.forEach((e) => {
+		n.observe(e);
+	});
+}
+function ee(e = !1) {
+	if (typeof document > "u") return;
+	let t = () => {
+		e && console.log(`[visionary-loader] initOnDOMLoaded running at ${performance.now().toFixed(1)}ms, readyState: ${document.readyState}`), $(e);
+	};
+	document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", t) : t();
+}
+//#endregion
+export { ee as a, p as c, $ as i, K as n, W as o, G as r, V as s, J as t };

package/dist/{visionary-image.d.ts → index.d.cts}

@@ -1,9 +1,9 @@
+import { BlurhashUrlOptions } from 'blurhash-url';
 import { CSSProperties } from 'react';
-import { ImageSizeToken } from 'visionary-url';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { VisionaryImageOptions } from 'visionary-url';
+import { ImageSizeToken } from 'blurhash-url/constants';
+import { JSX } from 'react/jsx-runtime';
 
-declare const Image_2: ({ alt: altText, bgColorAlpha, className, debug, disableBlurLayer, disableImageLayer, endpoint, height: userHeight, hideImageLayer, lazy, onClick, onError, onLoad, preventDrag, preventSelection, punch, size, src, style: userStyles, width: userWidth, }: VisionaryImageProps) => JSX_2.Element;
+declare const Image_2: ({ alt: altText, bgColorAlpha, className, debug, disableBlurLayer, disableImageLayer, endpoint, height: userHeight, hideImageLayer, lazy, priority, onClick, onError, onLoad, preventDrag, preventSelection, punch, size, src, style: userStyles, width: userWidth, }: VisionaryImageProps) => JSX.Element;
 export { Image_2 as Image }
 
 export declare interface VisionaryImageProps {
@@ -18,7 +18,7 @@ export declare interface VisionaryImageProps {
     /** Classname applied to the container `div` or the fallback `img` element. */
     className?: string;
     /**
-     * Print debug info (Visionary data, render times) to the console
+     * Print debug info (Blurhash URL data, render times) to the console
      */
     debug?: boolean;
     /**
@@ -29,7 +29,7 @@ export declare interface VisionaryImageProps {
      * Disable rendering of image layer
      */
     disableImageLayer?: boolean;
-    /** Custom endpoint for image URLs (when using `generateVisionaryUrl()`) */
+    /** Custom endpoint for image URLs (when using `generateBlurhashUrl()`) */
     endpoint?: string;
     height?: number | string;
     /**
@@ -52,7 +52,7 @@ export declare interface VisionaryImageProps {
      * Callback function to run after image load
      */
     onLoad?: () => void;
-    options?: VisionaryImageOptions;
+    options?: BlurhashUrlOptions;
     /**
      * Prevents user from dragging the image element
      */
@@ -64,11 +64,16 @@ export declare interface VisionaryImageProps {
     /**
      * Blurhash punch parameter (default: 1)
      */
+    /**
+     * Mark as priority image (above-the-fold). Sets fetchpriority="high" and loading="eager".
+     * Use for LCP images to improve Core Web Vitals.
+     */
+    priority?: boolean;
     punch?: number;
-    /** If specified, overrides the size specified in a Visionary URL */
+    /** If specified, overrides the size specified in a Blurhash URL */
     size?: ImageSizeToken;
     /**
-     * Image `src` prop; if `src` contains a Visionary code, a Visionary image will be rendered, otherwise we fall back to a native `<img />` tag
+     * Image `src` prop; if `src` contains a Blurhash URL, a Visionary image is rendered, otherwise falls back to a native `<img />` tag
      */
     src: string;
     /** Styles are applied to the Visionary container (or the fallback <img> if a Visionary Image is not rendered) */