visionary-image 1.0.0 → 1.0.1

package/README.md

@@ -1,17 +1,17 @@
-# visionary-image
+# Visionary Image
 
-![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/visionary-ux/visionary-image/.github%2Fworkflows%2Fci-cd-workflow.yml?branch=master&style=flat-square)
+React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.
 
-> Visionary Image rapidly renders blurhash placeholders and boosts Core Web Vitals.
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/visionary-ux/visionary-image/.github%2Fworkflows%2Fci-cd-workflow.yml?branch=master&style=flat-square) ![npm package size (minzipped, via Bundlephobia)](https://img.shields.io/bundlephobia/minzip/visionary-image?style=flat-square&color=blue)
 
 **Features:**
 
-- Blurhash data encoded in the image URL via [visionary-url](https://github.com/visionary-ux/visionary-url) means zero latency image placeholders
-- Renders a true-to-size, responsive blurhash placeholder while the image loads, <u>eliminating Cumulative Layout Shift (CLS)</u>
-- Off-screen images are lazily loaded, reducing initial pageload size and request count, <u>improving Interaction to Next Paint (INP)</u>
+- Blurhash data encoded in the image URL via [visionary-url](https://github.com/visionary-ux/visionary-url) for instant image placeholders
+- Renders a true-to-size, responsive Blurhash placeholder while the image loads, eliminating Cumulative Layout Shift (CLS)
+- Images below the fold are lazily loaded, reducing initial page load size and request count, optimizing Interaction to Next Paint (INP)
 - Framework-tested (Remix, Next.js, Vite) with support for both client and server-side rendering (SSR, SSG) environments
 - Additional features: Prevent dragging, user-selection of image
-- Improves Core Web Vitals scores (CLS, and often INP and LCP) which are a primary ranking signal in Google Search
+- Improves Core Web Vitals scores which Google notes as an important ranking signal in Search.
 
 > "We highly recommend site owners achieve good Core Web Vitals for success with Search", [Google Search Central](https://developers.google.com/search/docs/appearance/core-web-vitals)
 
@@ -23,21 +23,19 @@ Install via npm, yarn, or pnpm.
 npm install --save visionary-image
 ```
 
-## Getting Started
+## Usage
 
-To render a Visionary Image, first create a Visionary URL.
+Create a Visionary image URL to get started.
 
 ### Creating a Visionary Image URL
 
-To create a Visionary URL from a public image URL see [Visionary URL Generator](#).
+There are several ways to create a Visionary URL.
 
-To generate Visionary data from a local file, use the [Drag-and-Drop Blurhash Generator](#).
+1. Use the [Visionary 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
 
-- Generate a Visionary URL at [https://visionary.cloud/url-generator](https://visionary.cloud/url-generator)
-- Copy a URL from your [Visionary Dashboard](https://visionary.cloud/dashboard)
-- Use this [sample URL]()
-
-### Render image component
+### Render Image
 
 ```tsx
 import { Image } from "visionary-image";

package/dist/visionary-image.es.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="v7y-styles",e.appendChild(document.createTextNode('.v7y_7587:before{content:"";display:block;padding-top:var(--v-ar)}.v7y_f2b7{display:none}.v7y_b8c0{-webkit-user-drag:none;pointer-events:none}.v7y_e0dd{-webkit-user-select:none;user-select:none}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-import { jsx as W, jsxs as yt } from "react/jsx-runtime";
-import { useRef as Y, useCallback as q, useState as wt, useEffect as xt, useLayoutEffect as Et, useMemo as It } from "react";
-function Rt(t) {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="v7y-styles",e.appendChild(document.createTextNode('.v7y_7587:before{content:"";display:block;padding-top:var(--v-ar)}.v7y_b8c0{-webkit-user-drag:none;pointer-events:none}.v7y_e0dd{-webkit-user-select:none;user-select:none}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+import { jsx as G, jsxs as vt } from "react/jsx-runtime";
+import { useRef as Y, useCallback as q, useState as yt, useEffect as wt, useLayoutEffect as It, useMemo as xt } from "react";
+function Et(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 var et = { exports: {} };
@@ -12,8 +12,8 @@ var et = { exports: {} };
 */
 (function(t) {
   (function() {
-    var n = {}.hasOwnProperty;
-    function e() {
+    var e = {}.hasOwnProperty;
+    function n() {
       for (var r = "", s = 0; s < arguments.length; s++) {
         var a = arguments[s];
         a && (r = c(r, o(a)));
@@ -26,28 +26,28 @@ var et = { exports: {} };
       if (typeof r != "object")
         return "";
       if (Array.isArray(r))
-        return e.apply(null, r);
+        return n.apply(null, r);
       if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
         return r.toString();
       var s = "";
       for (var a in r)
-        n.call(r, a) && r[a] && (s = c(s, a));
+        e.call(r, a) && r[a] && (s = c(s, a));
       return s;
     }
     function c(r, s) {
       return s ? r ? r + " " + s : r + s : r;
     }
-    t.exports ? (e.default = e, t.exports = e) : window.classNames = e;
+    t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
   })();
 })(et);
-var At = et.exports;
-const K = /* @__PURE__ */ Rt(At), Nt = (t, { root: n, rootMargin: e, threshold: o } = {}, c = []) => {
+var Rt = et.exports;
+const At = /* @__PURE__ */ Et(Rt), St = (t, { root: e, rootMargin: n, threshold: o } = {}, c = []) => {
   const r = Y(null), s = Y(null);
   return q((i) => {
-    r.current && s.current && (s.current.unobserve(r.current), s.current.disconnect(), s.current = null), i && (s.current = new IntersectionObserver(t, { root: n, rootMargin: e, threshold: o }), s.current.observe(i), r.current = i);
-  }, [r, n, e, JSON.stringify(o), ...c]);
-}, Ot = ({ root: t, rootMargin: n, threshold: e, unobserveOnEnter: o, target: c, onEnter: r, onLeave: s, defaultInView: a } = {}, i = []) => {
-  const [d, h] = wt({
+    r.current && s.current && (s.current.unobserve(r.current), s.current.disconnect(), s.current = null), i && (s.current = new IntersectionObserver(t, { root: e, rootMargin: n, threshold: o }), s.current.observe(i), r.current = i);
+  }, [r, e, n, JSON.stringify(o), ...c]);
+}, Nt = ({ root: t, rootMargin: e, threshold: n, unobserveOnEnter: o, target: c, onEnter: r, onLeave: s, defaultInView: a } = {}, i = []) => {
+  const [d, h] = yt({
     inView: a || !1,
     entry: null,
     observer: null
@@ -58,14 +58,14 @@ const K = /* @__PURE__ */ Rt(At), Nt = (t, { root: n, rootMargin: e, threshold:
       entry: p,
       observer: l
     }), b && o && (l.unobserve(p.target), l.disconnect()), b ? r == null || r(p, l) : s == null || s(p, l);
-  }, [r, s, o]), m = Nt(f, { root: t, rootMargin: n, threshold: e }, [o, ...i]);
-  return xt(() => {
+  }, [r, s, o]), m = St(f, { root: t, rootMargin: e, threshold: n }, [o, ...i]);
+  return wt(() => {
     c != null && c.current && m(c.current);
   }, [c, m]), [m, d.inView, d.entry, d.observer];
 };
-var L = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))(L || {}), y = /* @__PURE__ */ ((t) => (t.xs = "xs", t.sm = "sm", t.md = "md", t.lg = "lg", t.xl = "xl", t.xxl = "xxl", t["4k"] = "4k", t["5k"] = "5k", t.full = "full", t))(y || {}), C = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(C || {});
-const Ut = "https://link.visionary.cloud";
-L.AUTO, y.lg;
+var $ = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))($ || {}), y = /* @__PURE__ */ ((t) => (t.xs = "xs", t.sm = "sm", t.md = "md", t.lg = "lg", t.xl = "xl", t.xxl = "xxl", t["4k"] = "4k", t["5k"] = "5k", t.full = "full", t))(y || {}), P = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(P || {});
+const Ot = "https://link.visionary.cloud";
+$.AUTO, y.lg;
 const Z = {
   [y.xs]: 160,
   [y.sm]: 320,
@@ -78,61 +78,61 @@ const Z = {
   [y.full]: 0
 };
 Object.keys(Z).reduce(
-  (t, n) => {
-    const e = n, o = Z[e];
-    return o && (t[o] = e), t;
+  (t, e) => {
+    const n = e, o = Z[n];
+    return o && (t[o] = n), t;
   },
   {}
 );
-const rt = "!";
-var St = Object.defineProperty, Tt = (t, n, e) => n in t ? St(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, _t = (t, n, e) => Tt(t, typeof n != "symbol" ? n + "" : n, e), J = {}, j = {};
-Object.defineProperty(j, "__esModule", { value: !0 });
-function Ct(t) {
+const nt = "!";
+var Ut = Object.defineProperty, Tt = (t, e, n) => e in t ? Ut(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, Dt = (t, e, n) => Tt(t, typeof e != "symbol" ? e + "" : e, n), J = {}, L = {};
+Object.defineProperty(L, "__esModule", { value: !0 });
+function Pt(t) {
   return String.fromCharCode(parseInt(t.slice(1), 16));
 }
-function Dt(t) {
-  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Ct));
+function _t(t) {
+  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Pt));
 }
-j.encode = Dt;
-function Pt(t) {
+L.encode = _t;
+function Ct(t) {
   return `%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`;
 }
 function Vt(t) {
-  return decodeURIComponent(Array.from(atob(t), Pt).join(""));
+  return decodeURIComponent(Array.from(atob(t), Ct).join(""));
 }
-j.decode = Vt;
+L.decode = Vt;
 Object.defineProperty(J, "__esModule", { value: !0 });
-const ot = j;
+const rt = L;
 function $t(t) {
-  return ot.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
+  return rt.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
 }
 var Lt = J.decode = $t;
 function jt(t) {
-  return ot.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
+  return rt.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
 }
 var kt = J.encode = jt;
-const zt = (t) => t.filter(Boolean), Q = (t) => {
+const zt = (t) => t.filter(Boolean), K = (t) => {
   try {
     return new URL(t);
   } catch {
     return null;
   }
-}, k = (t = "") => /^[A-Za-z0-9_-]*$/.test(t), Bt = (t) => {
-  const { altText: n, bcc: e, blurhash: o, blurhashX: c, blurhashY: r, sourceHeight: s, sourceWidth: a, url: i } = t;
+}, j = (t = "") => /^[A-Za-z0-9_-]*$/.test(t), Bt = (t) => {
+  const { altText: e, bcc: n, blurhash: o, blurhashX: c, blurhashY: r, sourceHeight: s, sourceWidth: a, url: i } = t;
   if (!i || !a || !s)
     return new Error("Cannot construct visionary code: missing required url/width/height");
   const d = [i, a, s];
-  return !e || (d.push(e), !o || !c || !r) || (d.push(o, c, r), n && n.length && d.push(n)), Mt(d);
-}, Mt = (t) => kt(t.join(rt)), st = (t) => {
+  return !n || (d.push(n), !o || !c || !r) || (d.push(o, c, r), e && e.length && d.push(e)), Mt(d);
+}, Mt = (t) => kt(t.join(nt)), ot = (t) => {
   if (typeof t != "string")
     return null;
-  const n = t.trim();
-  if (!n.length || !k(n))
+  const e = t.trim();
+  if (!e.length || !j(e))
     return null;
-  const e = Lt(n);
-  if (!e)
+  const n = Lt(e);
+  if (!n)
     return null;
-  const o = e.split(rt);
+  const o = n.split(nt);
   if (o.length < 3)
     return null;
   const [c, r, s, a, i, d, h, f] = o, m = c.trim();
@@ -159,25 +159,25 @@ const zt = (t) => t.filter(Boolean), Q = (t) => {
 };
 class Gt extends Error {
   constructor() {
-    super(...arguments), _t(this, "message", "invalid endpoint URL (does it contain http/https?)");
+    super(...arguments), Dt(this, "message", "invalid endpoint URL (does it contain http/https?)");
   }
 }
-const Wt = (t) => t === C.DEBUG, Ft = (t) => t === C.DOWNLOAD, Ht = (t) => Object.values(L).includes(t), ct = (t) => Object.values(y).includes(t), Xt = (t = []) => {
-  const n = {};
-  for (const e of t)
-    ct(e) ? n.size = y[e] : Wt(e) ? n.debug = !0 : Ft(e) ? n.download = !0 : Ht(e) && (n.format = e);
-  return n;
+const Wt = (t) => t === P.DEBUG, Ft = (t) => t === P.DOWNLOAD, Ht = (t) => Object.values($).includes(t), st = (t) => Object.values(y).includes(t), Xt = (t = []) => {
+  const e = {};
+  for (const n of t)
+    st(n) ? e.size = y[n] : Wt(n) ? e.debug = !0 : Ft(n) ? e.download = !0 : Ht(n) && (e.format = n);
+  return e;
 }, Yt = (t) => {
   if (!t || typeof t != "object")
     return null;
-  const n = [];
-  return t.debug && n.push(C.DEBUG), t.download && n.push(C.DOWNLOAD), t.format && t.format !== L.AUTO && n.push(t.format), t.size && ct(t.size) && n.push(t.size), n.length ? n.sort().join(",") : null;
+  const e = [];
+  return t.debug && e.push(P.DEBUG), t.download && e.push(P.DOWNLOAD), t.format && t.format !== $.AUTO && e.push(t.format), t.size && st(t.size) && e.push(t.size), e.length ? e.sort().join(",") : null;
 }, Zt = (t) => {
-  if (k(t)) {
-    const n = st(t);
-    if (n)
+  if (j(t)) {
+    const e = ot(t);
+    if (e)
       return {
-        fields: n,
+        fields: e,
         options: {}
       };
   }
@@ -185,14 +185,14 @@ const Wt = (t) => t === C.DEBUG, Ft = (t) => t === C.DOWNLOAD, Ht = (t) => Objec
 }, qt = (t) => {
   if (!t)
     return null;
-  const n = t.trim();
-  if (!n)
+  const e = t.trim();
+  if (!e)
     return null;
   try {
-    const e = Kt(n);
-    if (!e)
+    const n = Kt(e);
+    if (!n)
       return null;
-    const { code: o, optionTokens: c } = e, r = st(o);
+    const { code: o, optionTokens: c } = n, r = ot(o);
     if (!r)
       return null;
     const s = Xt(c);
@@ -200,38 +200,38 @@ const Wt = (t) => t === C.DEBUG, Ft = (t) => t === C.DOWNLOAD, Ht = (t) => Objec
       fields: r,
       options: s
     };
-  } catch (e) {
-    e instanceof Error ? console.error(`Error parsing URL: ${e.message}`, e) : console.error("uncaught error", e);
+  } catch (n) {
+    n instanceof Error ? console.error(`Error parsing URL: ${n.message}`, n) : console.error("uncaught error", n);
   }
   return null;
-}, Jt = (t, n) => {
-  const e = Bt(t);
-  if (e instanceof Error)
+}, Jt = (t, e) => {
+  const n = Bt(t);
+  if (n instanceof Error)
     return null;
   let o = null;
-  if (n != null && n.endpoint && (o = Q(n == null ? void 0 : n.endpoint), !o))
+  if (e != null && e.endpoint && (o = K(e == null ? void 0 : e.endpoint), !o))
     throw new Gt(
       "Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://"
     );
-  o || (o = Q(Ut));
-  const c = [o.origin, "image", e], r = n ? Yt(n) : null;
-  return r && c.push(r), n != null && n.filename ? c.push(n.filename) : c.push("image.jpg"), c.join("/");
+  o || (o = K(Ot));
+  const c = [o.origin, "image", n], r = e ? Yt(e) : null;
+  return r && c.push(r), e != null && e.filename ? c.push(e.filename) : c.push("image.jpg"), c.join("/");
 }, Kt = (t) => {
   try {
-    const n = new URL(t), e = zt(n.pathname.split("/"));
-    if (e[0] !== "image" || ![3, 4].includes(e.length))
+    const e = new URL(t), n = zt(e.pathname.split("/"));
+    if (n[0] !== "image" || ![3, 4].includes(n.length))
       throw new Error("Unrecognized URL");
-    const o = e[1].trim();
-    if (!o.length || !k(o))
+    const o = n[1].trim();
+    if (!o.length || !j(o))
       throw new Error("URL is not formatted as base64url");
-    if (e.length === 4) {
-      const c = e[2].split(",");
+    if (n.length === 4) {
+      const c = n[2].split(",");
       return {
         code: o,
         optionTokens: c
       };
     }
-    if (e.length === 3)
+    if (n.length === 3)
       return {
         code: o,
         optionTokens: []
@@ -240,214 +240,218 @@ const Wt = (t) => t === C.DEBUG, Ft = (t) => t === C.DOWNLOAD, Ht = (t) => Objec
     return null;
   }
   return null;
-}, it = 0.7, at = 1, O = 24, Qt = y.lg, lt = process.env.NODE_ENV, tn = lt === "development", ut = typeof document > "u", nn = lt === "test", en = ut ? () => {
-} : Et, rn = "<visionary>", N = (t, ...n) => {
-  !console || typeof console.log != "function" || console.log(`${rn} ${t}`, ...n);
-}, on = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~", V = (t, n, e) => {
+}, ct = 0.7, it = 1, N = 24, Qt = y.lg, at = process.env.NODE_ENV, te = at === "development", lt = typeof document > "u", ee = at === "test", ne = lt ? () => {
+} : It, re = "<visionary>", S = (t, ...e) => {
+  !console || typeof console.log != "function" || console.log(`${re} ${t}`, ...e);
+}, oe = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~", C = (t, e, n) => {
   let o = 0;
-  for (; n < e; )
-    o *= 83, o += on.indexOf(t[n++]);
+  for (; e < n; )
+    o *= 83, o += oe.indexOf(t[e++]);
   return o;
-}, dt = Math.pow, D = Math.PI, sn = D * 2, ft = 3294.6, pt = 269.025, cn = (t) => t > 10.31475 ? dt(t / pt + 0.052132, 2.4) : t / ft, F = (t) => ~~(t > 1227e-8 ? pt * dt(t, 0.416666) - 13.025 : t * ft + 1), _ = (t) => (t < 0 ? -1 : 1) * t * t, tt = (t) => {
-  for (t += D / 2; t > D; )
-    t -= sn;
-  const n = 1.27323954 * t - 0.405284735 * _(t);
-  return 0.225 * (_(n) - n) + n;
+}, ut = Math.pow, _ = Math.PI, se = _ * 2, dt = 3294.6, ft = 269.025, ce = (t) => t > 10.31475 ? ut(t / ft + 0.052132, 2.4) : t / dt, W = (t) => ~~(t > 1227e-8 ? ft * ut(t, 0.416666) - 13.025 : t * dt + 1), D = (t) => (t < 0 ? -1 : 1) * t * t, Q = (t) => {
+  for (t += _ / 2; t > _; )
+    t -= se;
+  const e = 1.27323954 * t - 0.405284735 * D(t);
+  return 0.225 * (D(e) - e) + e;
 };
-function an(t) {
-  const n = V(t, 2, 6);
-  return [n >> 16, n >> 8 & 255, n & 255];
+function ie(t) {
+  const e = C(t, 2, 6);
+  return [e >> 16, e >> 8 & 255, e & 255];
 }
-function ln(t, n, e, o) {
-  const c = V(t, 0, 1), r = c % 9 + 1, s = ~~(c / 9) + 1, a = r * s;
-  let i = 0, d = 0, h = 0, f = 0, m = 0, p = 0, l = 0, v = 0, b = 0, g = 0, w = 0, E = 0, u = 0, I = 0;
-  const U = (V(t, 1, 2) + 1) / 13446 * (o | 1), x = new Float64Array(a * 3), z = an(t);
+function ae(t, e, n, o) {
+  const c = C(t, 0, 1), r = c % 9 + 1, s = ~~(c / 9) + 1, a = r * s;
+  let i = 0, d = 0, h = 0, f = 0, m = 0, p = 0, l = 0, v = 0, b = 0, g = 0, w = 0, x = 0, u = 0, E = 0;
+  const O = (C(t, 1, 2) + 1) / 13446 * (o | 1), I = new Float64Array(a * 3), k = ie(t);
   for (i = 0; i < 3; i++)
-    x[i] = cn(z[i]);
+    I[i] = ce(k[i]);
   for (i = 1; i < a; i++)
-    I = V(t, 4 + i * 2, 6 + i * 2), x[i * 3] = _(~~(I / (19 * 19)) - 9) * U, x[i * 3 + 1] = _(~~(I / 19) % 19 - 9) * U, x[i * 3 + 2] = _(I % 19 - 9) * U;
-  const S = n * 4, R = new Uint8ClampedArray(S * e);
-  for (f = 0; f < e; f++)
-    for (E = D * f / e, h = 0; h < n; h++) {
-      for (m = 0, p = 0, l = 0, u = D * h / n, d = 0; d < s; d++)
-        for (b = tt(E * d), i = 0; i < r; i++)
-          v = tt(u * i) * b, g = (i + d * r) * 3, m += x[g] * v, p += x[g + 1] * v, l += x[g + 2] * v;
-      w = 4 * h + f * S, R[w] = F(m), R[w + 1] = F(p), R[w + 2] = F(l), R[w + 3] = 255;
+    E = C(t, 4 + i * 2, 6 + i * 2), I[i * 3] = D(~~(E / (19 * 19)) - 9) * O, I[i * 3 + 1] = D(~~(E / 19) % 19 - 9) * O, I[i * 3 + 2] = D(E % 19 - 9) * O;
+  const U = e * 4, R = new Uint8ClampedArray(U * n);
+  for (f = 0; f < n; f++)
+    for (x = _ * f / n, h = 0; h < e; h++) {
+      for (m = 0, p = 0, l = 0, u = _ * h / e, d = 0; d < s; d++)
+        for (b = Q(x * d), i = 0; i < r; i++)
+          v = Q(u * i) * b, g = (i + d * r) * 3, m += I[g] * v, p += I[g + 1] * v, l += I[g + 2] * v;
+      w = 4 * h + f * U, R[w] = W(m), R[w + 1] = W(p), R[w + 2] = W(l), R[w + 3] = 255;
     }
   return R;
 }
-const $ = (t) => {
+const V = (t) => {
   try {
     return new URL(t);
   } catch {
     return null;
   }
-}, un = (t, n) => `rgba(${t.r},${t.g},${t.b},${n})`, H = (t) => tn || nn ? {
+}, le = (t, e) => `rgba(${t.r},${t.g},${t.b},${e})`, F = (t) => te || ee ? {
   "data-testid": t
-} : {}, dn = (t, n) => n ? {
+} : {}, ue = (t, e) => e ? {
   "data-fileid": t
-} : {}, nt = (t, n) => Math.min(t, n), fn = (t) => {
-  let n = t.replace(/^#/, "");
-  if (n.length !== 3 && n.length !== 6)
+} : {}, tt = (t, e) => Math.min(t, e), de = (t) => {
+  let e = t.replace(/^#/, "");
+  if (e.length !== 3 && e.length !== 6)
     return null;
-  n.length === 3 && (n = `${n[0]}${n[0]}${n[1]}${n[1]}${n[2]}${n[2]}`);
-  const e = parseInt(n.slice(0, 2), 16), o = parseInt(n.slice(2, 4), 16);
-  return { b: parseInt(n.slice(4, 6), 16), g: o, r: e };
-}, A = (t, n = 0) => {
-  const e = Math.pow(10, n);
-  return Math.round(t * e) / e;
-}, pn = (t, n) => {
-  const e = $(t), o = $(n);
-  return !e || !o ? t : (o.pathname = e.pathname, o.search = e.search, o.toString());
-}, hn = (t, n = {}, e = it, o = at) => {
+  e.length === 3 && (e = `${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`);
+  const n = parseInt(e.slice(0, 2), 16), o = parseInt(e.slice(2, 4), 16);
+  return { b: parseInt(e.slice(4, 6), 16), g: o, r: n };
+}, A = (t, e = 0) => {
+  const n = Math.pow(10, e);
+  return Math.round(t * n) / n;
+}, fe = (t, e) => {
+  const n = V(t), o = V(e);
+  return !n || !o ? t : (o.pathname = n.pathname, o.search = n.search, o.toString());
+}, pe = (t, e = {}, n = ct, o = it) => {
   if (!t)
     return null;
   try {
-    n.debug && N("input imageSrc:", t);
+    e.debug && S("input imageSrc:", t);
     const c = Zt(t);
-    if (n.debug && N("Visionary URL data: ", c), !c)
+    if (e.debug && S("Visionary URL data: ", c), !c)
       throw new Error("Could not parse Visionary URL");
     const { fields: r, options: s } = c;
     if (r.sourceWidth < 1 || r.sourceHeight < 1)
       throw new Error("Invalid image dimensions");
-    const a = r.sourceWidth / r.sourceHeight, i = (n == null ? void 0 : n.size) ?? s.size ?? Qt, d = Z[i];
+    const a = r.sourceWidth / r.sourceHeight, i = (e == null ? void 0 : e.size) ?? s.size ?? Qt, d = Z[i];
     let h = 0, f = 0, m = 0;
     if (a >= 1) {
-      f = h = nt(d, r.sourceWidth);
+      f = h = tt(d, r.sourceWidth);
       const g = A(f / a);
       m = A(f / g, 6);
     } else
-      h = nt(d, r.sourceHeight), f = A(h * a), m = A(f / h, 6);
+      h = tt(d, r.sourceHeight), f = A(h * a), m = A(f / h, 6);
     const p = A(100 / m, 6), l = {
       ...r,
       arPaddingTop: `${p}%`,
       aspectRatio: m,
       maxWidth: f,
       src: t
-    }, v = $(r.url);
+    }, v = V(r.url);
     if (v)
       l.src = v.toString();
-    else if (!$(t) && k(r.url)) {
+    else if (!V(t) && j(r.url)) {
       const g = Jt(r, {
-        endpoint: n.endpoint,
+        endpoint: e.endpoint,
         size: i
       });
       g && (l.src = g);
     }
-    n.endpoint && (l.src = pn(l.src, n.endpoint));
-    const b = r.bcc ? fn(r.bcc) : null;
-    if (b && (l.backgroundColor = un(b, e)), !ut && r.blurhash && !n.disableBlurLayer) {
-      const g = performance.now(), w = ln(r.blurhash, O, O, o), E = performance.now() - g;
-      n.debug && N(`Blurhash decode time: ${A(E, 1)} ms`), w && (l.pixels = w);
+    e.endpoint && (l.src = fe(l.src, e.endpoint));
+    const b = r.bcc ? de(r.bcc) : null;
+    if (b && (l.backgroundColor = le(b, n)), !lt && r.blurhash && !e.disableBlurLayer) {
+      const g = performance.now(), w = ae(r.blurhash, N, N, o), x = performance.now() - g;
+      e.debug && S(`Blurhash decode time: ${A(x, 1)} ms`), w && (l.pixels = w);
     }
-    return n.debug && N("Visionary Image state: ", l), l;
+    return e.debug && S("Visionary Image state: ", l), l;
   } catch {
     return null;
   }
-}, ht = {
+}, pt = {
   bottom: 0,
   left: 0,
   position: "absolute",
   right: 0,
   top: 0
-}, mn = {
-  ...ht,
+}, he = {
+  ...pt,
   maxHeight: "100%",
   maxWidth: "100%"
-}, gn = {
-  ...ht,
+}, me = {
+  ...pt,
   height: "100%",
   width: "100%"
-}, X = {
+}, ge = (t) => {
+  const e = {
+    ...he
+  };
+  return t && (e.display = "none"), e;
+}, H = {
   CANVAS: "canvas",
   CONTAINER: "container",
   IMAGE: "image"
-}, bn = "v7y_7587", vn = "v7y_f2b7", yn = "v7y_b8c0", wn = "v7y_e0dd", P = {
-  container: bn,
-  hidden: vn,
-  preventDrag: yn,
-  preventSelection: wn
-}, An = ({
+}, be = "v7y_7587", ve = "v7y_b8c0", ye = "v7y_e0dd", X = {
+  container: be,
+  preventDrag: ve,
+  preventSelection: ye
+}, Re = ({
   alt: t,
-  bgColorAlpha: n = it,
-  className: e,
+  bgColorAlpha: e = ct,
+  className: n,
   debug: o = !1,
   disableBlurLayer: c = !1,
   disableImageLayer: r = !1,
   endpoint: s,
   height: a,
-  hideImageLayer: i,
+  hideImageLayer: i = !1,
   lazy: d = !0,
   onClick: h,
   onError: f,
   onLoad: m,
   preventDrag: p = !1,
   preventSelection: l = !1,
-  punch: v = at,
+  punch: v = it,
   size: b,
   src: g,
   style: w,
-  width: E
+  width: x
 }) => {
-  const u = It(() => hn(g, {
+  const u = xt(() => pe(g, {
     debug: o,
     disableBlurLayer: c,
     endpoint: s,
     size: b
-  }, n, v), [n, o, c, s, v, b, g]), I = Y(null), [U, x] = Ot();
-  en(
+  }, e, v), [e, o, c, s, v, b, g]), E = Y(null), [O, I] = Nt();
+  ne(
     function() {
-      if (!I.current || !(u != null && u.blurhash))
+      if (!E.current || !(u != null && u.blurhash))
         return;
       if (!u.pixels) {
         console.warn("No pixel data passed in, skipping");
         return;
       }
-      const bt = performance.now(), M = I.current.getContext("2d");
-      if (!M) {
+      const gt = performance.now(), B = E.current.getContext("2d");
+      if (!B) {
         console.warn("Cannot access canvasRenderingContext, skipping");
         return;
       }
-      const G = M.createImageData(O, O);
-      if (!G) {
+      const M = B.createImageData(N, N);
+      if (!M) {
         console.warn("Could not create ImageData on CanvasRenderingContext");
         return;
       }
-      if (G.data.set(u.pixels), M.putImageData(G, 0, 0), o) {
-        const vt = performance.now() - bt;
-        N(`Canvas render time: ${A(vt, 1)} ms`);
+      if (M.data.set(u.pixels), B.putImageData(M, 0, 0), o) {
+        const bt = performance.now() - gt;
+        S(`Canvas render time: ${A(bt, 1)} ms`);
       }
     },
     [u == null ? void 0 : u.blurhash, u == null ? void 0 : u.pixels, o]
   );
-  const z = q(
+  const k = q(
     (T) => {
-      o && N("Image load error ", T), f && f();
+      o && S("Image load error ", T), f && f();
     },
     [o, f]
-  ), S = {
+  ), U = {
     alt: t,
-    loading: !d || x ? "eager" : "lazy",
+    loading: !d || I ? "eager" : "lazy",
     onLoad: m
   };
   if (!u) {
-    o && N("Not a Visionary URL, rendering fallback <img />");
+    o && S("Not a Visionary URL, rendering fallback <img />");
     const T = {
-      ...S,
-      className: e,
+      ...U,
+      className: n,
       height: a,
       onClick: h,
       onError: f,
       src: g,
       style: w,
-      width: E
+      width: x
     };
-    return /* @__PURE__ */ W("img", { ...T });
+    return /* @__PURE__ */ G("img", { ...T });
   }
-  const R = K(P.container, e, {
-    [P.preventDrag]: !!p,
-    [P.preventSelection]: !!l
-  }), B = {
+  const R = At(X.container, n, {
+    [X.preventDrag]: !!p,
+    [X.preventSelection]: !!l
+  }), z = {
     ...{
       "--v-ar": u.arPaddingTop
     },
@@ -458,42 +462,39 @@ const $ = (t) => {
     width: "100%",
     ...w
   };
-  E && (B.width = E), a && (B.height = a);
-  const mt = {
+  x && (z.width = x), a && (z.height = a);
+  const ht = {
     onClick: h
-  }, gt = K({
-    [P.hidden]: !!i
-  });
-  return /* @__PURE__ */ yt(
+  }, mt = ge(i);
+  return /* @__PURE__ */ vt(
     "div",
     {
       className: R,
-      ref: U,
-      style: B,
-      ...dn(u.url, o),
-      ...H(X.CONTAINER),
-      ...mt,
+      ref: O,
+      style: z,
+      ...ue(u.url, o),
+      ...F(H.CONTAINER),
+      ...ht,
       children: [
-        !c && /* @__PURE__ */ W(
+        !c && /* @__PURE__ */ G(
           "canvas",
           {
-            height: O,
-            ref: I,
-            style: gn,
-            width: O,
-            ...H(X.CANVAS)
+            height: N,
+            ref: E,
+            style: me,
+            width: N,
+            ...F(H.CANVAS)
           }
         ),
         !r && // eslint-disable-next-line jsx-a11y/alt-text -- `sharedImgProps` includes alt tag
-        /* @__PURE__ */ W(
+        /* @__PURE__ */ G(
           "img",
           {
-            ...S,
-            ...H(X.IMAGE),
-            className: gt,
-            onError: z,
+            ...U,
+            ...F(H.IMAGE),
+            onError: k,
             src: u.src,
-            style: mn
+            style: mt
           }
         )
       ]
@@ -501,5 +502,5 @@ const $ = (t) => {
   );
 };
 export {
-  An as Image
+  Re as Image
 };

package/dist/visionary-image.umd.js

@@ -1,6 +1,6 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="v7y-styles",e.appendChild(document.createTextNode('.v7y_7587:before{content:"";display:block;padding-top:var(--v-ar)}.v7y_f2b7{display:none}.v7y_b8c0{-webkit-user-drag:none;pointer-events:none}.v7y_e0dd{-webkit-user-select:none;user-select:none}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-(function(E,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],R):(E=typeof globalThis<"u"?globalThis:E||self,R(E.VisionaryImage={},E.jsxRuntime,E.React))})(this,function(E,R,x){"use strict";function me(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var K={exports:{}};/*!
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="v7y-styles",e.appendChild(document.createTextNode('.v7y_7587:before{content:"";display:block;padding-top:var(--v-ar)}.v7y_b8c0{-webkit-user-drag:none;pointer-events:none}.v7y_e0dd{-webkit-user-select:none;user-select:none}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+(function(E,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],R):(E=typeof globalThis<"u"?globalThis:E||self,R(E.VisionaryImage={},E.jsxRuntime,E.React))})(this,function(E,R,I){"use strict";function ht(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var K={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var r="",s=0;s<arguments.length;s++){var a=arguments[s];a&&(r=i(r,o(a)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var s="";for(var a in r)t.call(r,a)&&r[a]&&(s=i(s,a));return s}function i(r,s){return s?r?r+" "+s:r+s:r}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(K);var ge=K.exports;const Q=me(ge),be=(e,{root:t,rootMargin:n,threshold:o}={},i=[])=>{const r=x.useRef(null),s=x.useRef(null);return x.useCallback(c=>{r.current&&s.current&&(s.current.unobserve(r.current),s.current.disconnect(),s.current=null),c&&(s.current=new IntersectionObserver(e,{root:t,rootMargin:n,threshold:o}),s.current.observe(c),r.current=c)},[r,t,n,JSON.stringify(o),...i])},ve=({root:e,rootMargin:t,threshold:n,unobserveOnEnter:o,target:i,onEnter:r,onLeave:s,defaultInView:a}={},c=[])=>{const[d,h]=x.useState({inView:a||!1,entry:null,observer:null}),f=x.useCallback(([p],l)=>{const b=l.thresholds.some(g=>p.intersectionRatio>=g)&&p.isIntersecting;h({inView:b,entry:p,observer:l}),b&&o&&(l.unobserve(p.target),l.disconnect()),b?r==null||r(p,l):s==null||s(p,l)},[r,s,o]),m=be(f,{root:e,rootMargin:t,threshold:n},[o,...c]);return x.useEffect(()=>{i!=null&&i.current&&m(i.current)},[i,m]),[m,d.inView,d.entry,d.observer]};var $=(e=>(e.AUTO="auto",e.AVIF="avif",e.JPEG="jpeg",e.WEBP="webp",e))($||{}),y=(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))(y||{}),C=(e=>(e.DEBUG="debug",e.DOWNLOAD="download",e))(C||{});const ye="https://link.visionary.cloud";$.AUTO,y.lg;const G={[y.xs]:160,[y.sm]:320,[y.md]:640,[y.lg]:1280,[y.xl]:1920,[y.xxl]:2560,[y["4k"]]:3840,[y["5k"]]:5120,[y.full]:0};Object.keys(G).reduce((e,t)=>{const n=t,o=G[n];return o&&(e[o]=n),e},{});const ee="!";var we=Object.defineProperty,xe=(e,t,n)=>t in e?we(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Ie=(e,t,n)=>xe(e,typeof t!="symbol"?t+"":t,n),W={},L={};Object.defineProperty(L,"__esModule",{value:!0});function Ee(e){return String.fromCharCode(parseInt(e.slice(1),16))}function Re(e){return btoa(encodeURIComponent(e).replace(/%[0-9A-F]{2}/g,Ee))}L.encode=Re;function Ae(e){return`%${`00${e.charCodeAt(0).toString(16)}`.slice(-2)}`}function Se(e){return decodeURIComponent(Array.from(atob(e),Ae).join(""))}L.decode=Se,Object.defineProperty(W,"__esModule",{value:!0});const te=L;function Te(e){return te.decode(e.replace(/\-/g,"+").replace(/_/g,"/"))}var Ne=W.decode=Te;function Oe(e){return te.encode(e).replace(/\//g,"_").replace(/\+/g,"-").replace(/=+$/,"")}var Ue=W.encode=Oe;const Ce=e=>e.filter(Boolean),ne=e=>{try{return new URL(e)}catch{return null}},k=(e="")=>/^[A-Za-z0-9_-]*$/.test(e),De=e=>{const{altText:t,bcc:n,blurhash:o,blurhashX:i,blurhashY:r,sourceHeight:s,sourceWidth:a,url:c}=e;if(!c||!a||!s)return new Error("Cannot construct visionary code: missing required url/width/height");const d=[c,a,s];return!n||(d.push(n),!o||!i||!r)||(d.push(o,i,r),t&&t.length&&d.push(t)),Pe(d)},Pe=e=>Ue(e.join(ee)),re=e=>{if(typeof e!="string")return null;const t=e.trim();if(!t.length||!k(t))return null;const n=Ne(t);if(!n)return null;const o=n.split(ee);if(o.length<3)return null;const[i,r,s,a,c,d,h,f]=o,m=i.trim();if(!m.length)return console.error("Cannot parse code, empty file id"),null;const p=Number(r.trim()),l=Number(s.trim());if(isNaN(p)||isNaN(l)||!p||!l)return console.error("Cannot parse Visionary Code: invalid image dimensions",r,s),null;const v=Number(d)??0,b=Number(h)??0;return v<1||b<1?(console.error("Cannot parse Visionary Code: invalid blurhash x, y component dimensions",v,b),null):{altText:f,bcc:a,blurhash:c,blurhashX:v,blurhashY:b,sourceHeight:l,sourceWidth:p,url:m}};class _e extends Error{constructor(){super(...arguments),Ie(this,"message","invalid endpoint URL (does it contain http/https?)")}}const je=e=>e===C.DEBUG,Ve=e=>e===C.DOWNLOAD,$e=e=>Object.values($).includes(e),oe=e=>Object.values(y).includes(e),Le=(e=[])=>{const t={};for(const n of e)oe(n)?t.size=y[n]:je(n)?t.debug=!0:Ve(n)?t.download=!0:$e(n)&&(t.format=n);return t},ke=e=>{if(!e||typeof e!="object")return null;const t=[];return e.debug&&t.push(C.DEBUG),e.download&&t.push(C.DOWNLOAD),e.format&&e.format!==$.AUTO&&t.push(e.format),e.size&&oe(e.size)&&t.push(e.size),t.length?t.sort().join(","):null},ze=e=>{if(k(e)){const t=re(e);if(t)return{fields:t,options:{}}}return Be(e)},Be=e=>{if(!e)return null;const t=e.trim();if(!t)return null;try{const n=Ge(t);if(!n)return null;const{code:o,optionTokens:i}=n,r=re(o);if(!r)return null;const s=Le(i);return{fields:r,options:s}}catch(n){n instanceof Error?console.error(`Error parsing URL: ${n.message}`,n):console.error("uncaught error",n)}return null},Me=(e,t)=>{const n=De(e);if(n instanceof Error)return null;let o=null;if(t!=null&&t.endpoint&&(o=ne(t==null?void 0:t.endpoint),!o))throw new _e("Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://");o||(o=ne(ye));const i=[o.origin,"image",n],r=t?ke(t):null;return r&&i.push(r),t!=null&&t.filename?i.push(t.filename):i.push("image.jpg"),i.join("/")},Ge=e=>{try{const t=new URL(e),n=Ce(t.pathname.split("/"));if(n[0]!=="image"||![3,4].includes(n.length))throw new Error("Unrecognized URL");const o=n[1].trim();if(!o.length||!k(o))throw new Error("URL is not formatted as base64url");if(n.length===4){const i=n[2].split(",");return{code:o,optionTokens:i}}if(n.length===3)return{code:o,optionTokens:[]}}catch{return null}return null},se=.7,ie=1,U=24,We=y.lg,ce=process.env.NODE_ENV,Fe=ce==="development",ae=typeof document>"u",He=ce==="test",qe=ae?()=>{}:x.useLayoutEffect,Xe="<visionary>",T=(e,...t)=>{!console||typeof console.log!="function"||console.log(`${Xe} ${e}`,...t)},Ye="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~",z=(e,t,n)=>{let o=0;for(;t<n;)o*=83,o+=Ye.indexOf(e[t++]);return o},le=Math.pow,D=Math.PI,Ze=D*2,ue=3294.6,de=269.025,Je=e=>e>10.31475?le(e/de+.052132,2.4):e/ue,F=e=>~~(e>1227e-8?de*le(e,.416666)-13.025:e*ue+1),P=e=>(e<0?-1:1)*e*e,fe=e=>{for(e+=D/2;e>D;)e-=Ze;const t=1.27323954*e-.405284735*P(e);return .225*(P(t)-t)+t};function Ke(e){const t=z(e,2,6);return[t>>16,t>>8&255,t&255]}function Qe(e,t,n,o){const i=z(e,0,1),r=i%9+1,s=~~(i/9)+1,a=r*s;let c=0,d=0,h=0,f=0,m=0,p=0,l=0,v=0,b=0,g=0,w=0,A=0,u=0,S=0;const _=(z(e,1,2)+1)/13446*(o|1),I=new Float64Array(a*3),X=Ke(e);for(c=0;c<3;c++)I[c]=Je(X[c]);for(c=1;c<a;c++)S=z(e,4+c*2,6+c*2),I[c*3]=P(~~(S/(19*19))-9)*_,I[c*3+1]=P(~~(S/19)%19-9)*_,I[c*3+2]=P(S%19-9)*_;const j=t*4,O=new Uint8ClampedArray(j*n);for(f=0;f<n;f++)for(A=D*f/n,h=0;h<t;h++){for(m=0,p=0,l=0,u=D*h/t,d=0;d<s;d++)for(b=fe(A*d),c=0;c<r;c++)v=fe(u*c)*b,g=(c+d*r)*3,m+=I[g]*v,p+=I[g+1]*v,l+=I[g+2]*v;w=4*h+f*j,O[w]=F(m),O[w+1]=F(p),O[w+2]=F(l),O[w+3]=255}return O}const B=e=>{try{return new URL(e)}catch{return null}},et=(e,t)=>`rgba(${e.r},${e.g},${e.b},${t})`,H=e=>Fe||He?{"data-testid":e}:{},tt=(e,t)=>t?{"data-fileid":e}:{},pe=(e,t)=>Math.min(e,t),nt=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]}`);const n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16);return{b:parseInt(t.slice(4,6),16),g:o,r:n}},N=(e,t=0)=>{const n=Math.pow(10,t);return Math.round(e*n)/n},rt=(e,t)=>{const n=B(e),o=B(t);return!n||!o?e:(o.pathname=n.pathname,o.search=n.search,o.toString())},ot=(e,t={},n=se,o=ie)=>{if(!e)return null;try{t.debug&&T("input imageSrc:",e);const i=ze(e);if(t.debug&&T("Visionary URL data: ",i),!i)throw new Error("Could not parse Visionary URL");const{fields:r,options:s}=i;if(r.sourceWidth<1||r.sourceHeight<1)throw new Error("Invalid image dimensions");const a=r.sourceWidth/r.sourceHeight,c=(t==null?void 0:t.size)??s.size??We,d=G[c];let h=0,f=0,m=0;if(a>=1){f=h=pe(d,r.sourceWidth);const g=N(f/a);m=N(f/g,6)}else h=pe(d,r.sourceHeight),f=N(h*a),m=N(f/h,6);const p=N(100/m,6),l={...r,arPaddingTop:`${p}%`,aspectRatio:m,maxWidth:f,src:e},v=B(r.url);if(v)l.src=v.toString();else if(!B(e)&&k(r.url)){const g=Me(r,{endpoint:t.endpoint,size:c});g&&(l.src=g)}t.endpoint&&(l.src=rt(l.src,t.endpoint));const b=r.bcc?nt(r.bcc):null;if(b&&(l.backgroundColor=et(b,n)),!ae&&r.blurhash&&!t.disableBlurLayer){const g=performance.now(),w=Qe(r.blurhash,U,U,o),A=performance.now()-g;t.debug&&T(`Blurhash decode time: ${N(A,1)} ms`),w&&(l.pixels=w)}return t.debug&&T("Visionary Image state: ",l),l}catch{return null}},he={bottom:0,left:0,position:"absolute",right:0,top:0},st={...he,maxHeight:"100%",maxWidth:"100%"},it={...he,height:"100%",width:"100%"},q={CANVAS:"canvas",CONTAINER:"container",IMAGE:"image"},M={container:"v7y_7587",hidden:"v7y_f2b7",preventDrag:"v7y_b8c0",preventSelection:"v7y_e0dd"},ct=({alt:e,bgColorAlpha:t=se,className:n,debug:o=!1,disableBlurLayer:i=!1,disableImageLayer:r=!1,endpoint:s,height:a,hideImageLayer:c,lazy:d=!0,onClick:h,onError:f,onLoad:m,preventDrag:p=!1,preventSelection:l=!1,punch:v=ie,size:b,src:g,style:w,width:A})=>{const u=x.useMemo(()=>ot(g,{debug:o,disableBlurLayer:i,endpoint:s,size:b},t,v),[t,o,i,s,v,b,g]),S=x.useRef(null),[_,I]=ve();qe(function(){if(!S.current||!(u!=null&&u.blurhash))return;if(!u.pixels){console.warn("No pixel data passed in, skipping");return}const ut=performance.now(),Z=S.current.getContext("2d");if(!Z){console.warn("Cannot access canvasRenderingContext, skipping");return}const J=Z.createImageData(U,U);if(!J){console.warn("Could not create ImageData on CanvasRenderingContext");return}if(J.data.set(u.pixels),Z.putImageData(J,0,0),o){const dt=performance.now()-ut;T(`Canvas render time: ${N(dt,1)} ms`)}},[u==null?void 0:u.blurhash,u==null?void 0:u.pixels,o]);const X=x.useCallback(V=>{o&&T("Image load error ",V),f&&f()},[o,f]),j={alt:e,loading:!d||I?"eager":"lazy",onLoad:m};if(!u){o&&T("Not a Visionary URL, rendering fallback <img />");const V={...j,className:n,height:a,onClick:h,onError:f,src:g,style:w,width:A};return R.jsx("img",{...V})}const O=Q(M.container,n,{[M.preventDrag]:!!p,[M.preventSelection]:!!l}),Y={...{"--v-ar":u.arPaddingTop},aspectRatio:u.aspectRatio,backgroundColor:(u==null?void 0:u.backgroundColor)??void 0,maxWidth:u.maxWidth,position:"relative",width:"100%",...w};A&&(Y.width=A),a&&(Y.height=a);const at={onClick:h},lt=Q({[M.hidden]:!!c});return R.jsxs("div",{className:O,ref:_,style:Y,...tt(u.url,o),...H(q.CONTAINER),...at,children:[!i&&R.jsx("canvas",{height:U,ref:S,style:it,width:U,...H(q.CANVAS)}),!r&&R.jsx("img",{...j,...H(q.IMAGE),className:lt,onError:X,src:u.src,style:st})]})};E.Image=ct,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+*/(function(t){(function(){var e={}.hasOwnProperty;function n(){for(var r="",s=0;s<arguments.length;s++){var a=arguments[s];a&&(r=i(r,o(a)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var s="";for(var a in r)e.call(r,a)&&r[a]&&(s=i(s,a));return s}function i(r,s){return s?r?r+" "+s:r+s:r}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(K);var gt=K.exports;const mt=ht(gt),bt=(t,{root:e,rootMargin:n,threshold:o}={},i=[])=>{const r=I.useRef(null),s=I.useRef(null);return I.useCallback(c=>{r.current&&s.current&&(s.current.unobserve(r.current),s.current.disconnect(),s.current=null),c&&(s.current=new IntersectionObserver(t,{root:e,rootMargin:n,threshold:o}),s.current.observe(c),r.current=c)},[r,e,n,JSON.stringify(o),...i])},yt=({root:t,rootMargin:e,threshold:n,unobserveOnEnter:o,target:i,onEnter:r,onLeave:s,defaultInView:a}={},c=[])=>{const[d,h]=I.useState({inView:a||!1,entry:null,observer:null}),f=I.useCallback(([p],l)=>{const b=l.thresholds.some(m=>p.intersectionRatio>=m)&&p.isIntersecting;h({inView:b,entry:p,observer:l}),b&&o&&(l.unobserve(p.target),l.disconnect()),b?r==null||r(p,l):s==null||s(p,l)},[r,s,o]),g=bt(f,{root:t,rootMargin:e,threshold:n},[o,...c]);return I.useEffect(()=>{i!=null&&i.current&&g(i.current)},[i,g]),[g,d.inView,d.entry,d.observer]};var $=(t=>(t.AUTO="auto",t.AVIF="avif",t.JPEG="jpeg",t.WEBP="webp",t))($||{}),v=(t=>(t.xs="xs",t.sm="sm",t.md="md",t.lg="lg",t.xl="xl",t.xxl="xxl",t["4k"]="4k",t["5k"]="5k",t.full="full",t))(v||{}),C=(t=>(t.DEBUG="debug",t.DOWNLOAD="download",t))(C||{});const vt="https://link.visionary.cloud";$.AUTO,v.lg;const M={[v.xs]:160,[v.sm]:320,[v.md]:640,[v.lg]:1280,[v.xl]:1920,[v.xxl]:2560,[v["4k"]]:3840,[v["5k"]]:5120,[v.full]:0};Object.keys(M).reduce((t,e)=>{const n=e,o=M[n];return o&&(t[o]=n),t},{});const Q="!";var wt=Object.defineProperty,It=(t,e,n)=>e in t?wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,xt=(t,e,n)=>It(t,typeof e!="symbol"?e+"":e,n),G={},L={};Object.defineProperty(L,"__esModule",{value:!0});function Et(t){return String.fromCharCode(parseInt(t.slice(1),16))}function Rt(t){return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g,Et))}L.encode=Rt;function At(t){return`%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`}function St(t){return decodeURIComponent(Array.from(atob(t),At).join(""))}L.decode=St,Object.defineProperty(G,"__esModule",{value:!0});const tt=L;function Tt(t){return tt.decode(t.replace(/\-/g,"+").replace(/_/g,"/"))}var Ot=G.decode=Tt;function Nt(t){return tt.encode(t).replace(/\//g,"_").replace(/\+/g,"-").replace(/=+$/,"")}var Ut=G.encode=Nt;const Ct=t=>t.filter(Boolean),et=t=>{try{return new URL(t)}catch{return null}},k=(t="")=>/^[A-Za-z0-9_-]*$/.test(t),Dt=t=>{const{altText:e,bcc:n,blurhash:o,blurhashX:i,blurhashY:r,sourceHeight:s,sourceWidth:a,url:c}=t;if(!c||!a||!s)return new Error("Cannot construct visionary code: missing required url/width/height");const d=[c,a,s];return!n||(d.push(n),!o||!i||!r)||(d.push(o,i,r),e&&e.length&&d.push(e)),Pt(d)},Pt=t=>Ut(t.join(Q)),nt=t=>{if(typeof t!="string")return null;const e=t.trim();if(!e.length||!k(e))return null;const n=Ot(e);if(!n)return null;const o=n.split(Q);if(o.length<3)return null;const[i,r,s,a,c,d,h,f]=o,g=i.trim();if(!g.length)return console.error("Cannot parse code, empty file id"),null;const p=Number(r.trim()),l=Number(s.trim());if(isNaN(p)||isNaN(l)||!p||!l)return console.error("Cannot parse Visionary Code: invalid image dimensions",r,s),null;const y=Number(d)??0,b=Number(h)??0;return y<1||b<1?(console.error("Cannot parse Visionary Code: invalid blurhash x, y component dimensions",y,b),null):{altText:f,bcc:a,blurhash:c,blurhashX:y,blurhashY:b,sourceHeight:l,sourceWidth:p,url:g}};class _t extends Error{constructor(){super(...arguments),xt(this,"message","invalid endpoint URL (does it contain http/https?)")}}const jt=t=>t===C.DEBUG,Vt=t=>t===C.DOWNLOAD,$t=t=>Object.values($).includes(t),rt=t=>Object.values(v).includes(t),Lt=(t=[])=>{const e={};for(const n of t)rt(n)?e.size=v[n]:jt(n)?e.debug=!0:Vt(n)?e.download=!0:$t(n)&&(e.format=n);return e},kt=t=>{if(!t||typeof t!="object")return null;const e=[];return t.debug&&e.push(C.DEBUG),t.download&&e.push(C.DOWNLOAD),t.format&&t.format!==$.AUTO&&e.push(t.format),t.size&&rt(t.size)&&e.push(t.size),e.length?e.sort().join(","):null},zt=t=>{if(k(t)){const e=nt(t);if(e)return{fields:e,options:{}}}return Bt(t)},Bt=t=>{if(!t)return null;const e=t.trim();if(!e)return null;try{const n=Gt(e);if(!n)return null;const{code:o,optionTokens:i}=n,r=nt(o);if(!r)return null;const s=Lt(i);return{fields:r,options:s}}catch(n){n instanceof Error?console.error(`Error parsing URL: ${n.message}`,n):console.error("uncaught error",n)}return null},Mt=(t,e)=>{const n=Dt(t);if(n instanceof Error)return null;let o=null;if(e!=null&&e.endpoint&&(o=et(e==null?void 0:e.endpoint),!o))throw new _t("Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://");o||(o=et(vt));const i=[o.origin,"image",n],r=e?kt(e):null;return r&&i.push(r),e!=null&&e.filename?i.push(e.filename):i.push("image.jpg"),i.join("/")},Gt=t=>{try{const e=new URL(t),n=Ct(e.pathname.split("/"));if(n[0]!=="image"||![3,4].includes(n.length))throw new Error("Unrecognized URL");const o=n[1].trim();if(!o.length||!k(o))throw new Error("URL is not formatted as base64url");if(n.length===4){const i=n[2].split(",");return{code:o,optionTokens:i}}if(n.length===3)return{code:o,optionTokens:[]}}catch{return null}return null},ot=.7,st=1,U=24,Wt=v.lg,it=process.env.NODE_ENV,Ft=it==="development",ct=typeof document>"u",Ht=it==="test",qt=ct?()=>{}:I.useLayoutEffect,Xt="<visionary>",T=(t,...e)=>{!console||typeof console.log!="function"||console.log(`${Xt} ${t}`,...e)},Yt="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~",z=(t,e,n)=>{let o=0;for(;e<n;)o*=83,o+=Yt.indexOf(t[e++]);return o},at=Math.pow,D=Math.PI,Zt=D*2,lt=3294.6,ut=269.025,Jt=t=>t>10.31475?at(t/ut+.052132,2.4):t/lt,W=t=>~~(t>1227e-8?ut*at(t,.416666)-13.025:t*lt+1),P=t=>(t<0?-1:1)*t*t,dt=t=>{for(t+=D/2;t>D;)t-=Zt;const e=1.27323954*t-.405284735*P(t);return .225*(P(e)-e)+e};function Kt(t){const e=z(t,2,6);return[e>>16,e>>8&255,e&255]}function Qt(t,e,n,o){const i=z(t,0,1),r=i%9+1,s=~~(i/9)+1,a=r*s;let c=0,d=0,h=0,f=0,g=0,p=0,l=0,y=0,b=0,m=0,w=0,A=0,u=0,S=0;const _=(z(t,1,2)+1)/13446*(o|1),x=new Float64Array(a*3),X=Kt(t);for(c=0;c<3;c++)x[c]=Jt(X[c]);for(c=1;c<a;c++)S=z(t,4+c*2,6+c*2),x[c*3]=P(~~(S/(19*19))-9)*_,x[c*3+1]=P(~~(S/19)%19-9)*_,x[c*3+2]=P(S%19-9)*_;const j=e*4,N=new Uint8ClampedArray(j*n);for(f=0;f<n;f++)for(A=D*f/n,h=0;h<e;h++){for(g=0,p=0,l=0,u=D*h/e,d=0;d<s;d++)for(b=dt(A*d),c=0;c<r;c++)y=dt(u*c)*b,m=(c+d*r)*3,g+=x[m]*y,p+=x[m+1]*y,l+=x[m+2]*y;w=4*h+f*j,N[w]=W(g),N[w+1]=W(p),N[w+2]=W(l),N[w+3]=255}return N}const B=t=>{try{return new URL(t)}catch{return null}},te=(t,e)=>`rgba(${t.r},${t.g},${t.b},${e})`,F=t=>Ft||Ht?{"data-testid":t}:{},ee=(t,e)=>e?{"data-fileid":t}:{},ft=(t,e)=>Math.min(t,e),ne=t=>{let e=t.replace(/^#/,"");if(e.length!==3&&e.length!==6)return null;e.length===3&&(e=`${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`);const n=parseInt(e.slice(0,2),16),o=parseInt(e.slice(2,4),16);return{b:parseInt(e.slice(4,6),16),g:o,r:n}},O=(t,e=0)=>{const n=Math.pow(10,e);return Math.round(t*n)/n},re=(t,e)=>{const n=B(t),o=B(e);return!n||!o?t:(o.pathname=n.pathname,o.search=n.search,o.toString())},oe=(t,e={},n=ot,o=st)=>{if(!t)return null;try{e.debug&&T("input imageSrc:",t);const i=zt(t);if(e.debug&&T("Visionary URL data: ",i),!i)throw new Error("Could not parse Visionary URL");const{fields:r,options:s}=i;if(r.sourceWidth<1||r.sourceHeight<1)throw new Error("Invalid image dimensions");const a=r.sourceWidth/r.sourceHeight,c=(e==null?void 0:e.size)??s.size??Wt,d=M[c];let h=0,f=0,g=0;if(a>=1){f=h=ft(d,r.sourceWidth);const m=O(f/a);g=O(f/m,6)}else h=ft(d,r.sourceHeight),f=O(h*a),g=O(f/h,6);const p=O(100/g,6),l={...r,arPaddingTop:`${p}%`,aspectRatio:g,maxWidth:f,src:t},y=B(r.url);if(y)l.src=y.toString();else if(!B(t)&&k(r.url)){const m=Mt(r,{endpoint:e.endpoint,size:c});m&&(l.src=m)}e.endpoint&&(l.src=re(l.src,e.endpoint));const b=r.bcc?ne(r.bcc):null;if(b&&(l.backgroundColor=te(b,n)),!ct&&r.blurhash&&!e.disableBlurLayer){const m=performance.now(),w=Qt(r.blurhash,U,U,o),A=performance.now()-m;e.debug&&T(`Blurhash decode time: ${O(A,1)} ms`),w&&(l.pixels=w)}return e.debug&&T("Visionary Image state: ",l),l}catch{return null}},pt={bottom:0,left:0,position:"absolute",right:0,top:0},se={...pt,maxHeight:"100%",maxWidth:"100%"},ie={...pt,height:"100%",width:"100%"},ce=t=>{const e={...se};return t&&(e.display="none"),e},H={CANVAS:"canvas",CONTAINER:"container",IMAGE:"image"},q={container:"v7y_7587",preventDrag:"v7y_b8c0",preventSelection:"v7y_e0dd"},ae=({alt:t,bgColorAlpha:e=ot,className:n,debug:o=!1,disableBlurLayer:i=!1,disableImageLayer:r=!1,endpoint:s,height:a,hideImageLayer:c=!1,lazy:d=!0,onClick:h,onError:f,onLoad:g,preventDrag:p=!1,preventSelection:l=!1,punch:y=st,size:b,src:m,style:w,width:A})=>{const u=I.useMemo(()=>oe(m,{debug:o,disableBlurLayer:i,endpoint:s,size:b},e,y),[e,o,i,s,y,b,m]),S=I.useRef(null),[_,x]=yt();qt(function(){if(!S.current||!(u!=null&&u.blurhash))return;if(!u.pixels){console.warn("No pixel data passed in, skipping");return}const de=performance.now(),Z=S.current.getContext("2d");if(!Z){console.warn("Cannot access canvasRenderingContext, skipping");return}const J=Z.createImageData(U,U);if(!J){console.warn("Could not create ImageData on CanvasRenderingContext");return}if(J.data.set(u.pixels),Z.putImageData(J,0,0),o){const fe=performance.now()-de;T(`Canvas render time: ${O(fe,1)} ms`)}},[u==null?void 0:u.blurhash,u==null?void 0:u.pixels,o]);const X=I.useCallback(V=>{o&&T("Image load error ",V),f&&f()},[o,f]),j={alt:t,loading:!d||x?"eager":"lazy",onLoad:g};if(!u){o&&T("Not a Visionary URL, rendering fallback <img />");const V={...j,className:n,height:a,onClick:h,onError:f,src:m,style:w,width:A};return R.jsx("img",{...V})}const N=mt(q.container,n,{[q.preventDrag]:!!p,[q.preventSelection]:!!l}),Y={...{"--v-ar":u.arPaddingTop},aspectRatio:u.aspectRatio,backgroundColor:(u==null?void 0:u.backgroundColor)??void 0,maxWidth:u.maxWidth,position:"relative",width:"100%",...w};A&&(Y.width=A),a&&(Y.height=a);const le={onClick:h},ue=ce(c);return R.jsxs("div",{className:N,ref:_,style:Y,...ee(u.url,o),...F(H.CONTAINER),...le,children:[!i&&R.jsx("canvas",{height:U,ref:S,style:ie,width:U,...F(H.CANVAS)}),!r&&R.jsx("img",{...j,...F(H.IMAGE),onError:X,src:u.src,style:ue})]})};E.Image=ae,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "visionary-image",
-  "version": "1.0.0",
+  "description": "React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/visionary-image.umd.js",
   "module": "./dist/visionary-image.es.js",
@@ -85,12 +86,13 @@
     "core-web-vitals",
     "fid",
     "image",
-    "lcp",
+    "inp",
     "performance",
     "placeholder",
     "react",
     "seo",
     "speed",
+    "typescript",
     "visionary",
     "web-vitals"
   ]