visionary-image 1.0.3 → 1.0.4

package/README.md

@@ -2,7 +2,7 @@
 
 React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.
 
-![GitHub Release](https://img.shields.io/github/v/release/visionary-ux/visionary-image?color=beige) [![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)](https://github.com/visionary-ux/visionary-image/actions/workflows/ci-cd-workflow.yml?query=branch%3Amaster) [![npm package size (minzipped, via Bundlephobia)](https://img.shields.io/bundlephobia/minzip/visionary-image?style=flat-square&color=blue)](https://bundlephobia.com/package/visionary-image) [![Storybook demo](https://img.shields.io/badge/-Storybook-FF4785?style=flat-square&logo=storybook&logoColor=white)](https://visionary-ux.github.io/visionary-image/)
+![GitHub Release](https://img.shields.io/github/v/release/visionary-ux/visionary-image?color=beige) [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/visionary-ux/visionary-image/.github%2Fworkflows%2Fci-cd-workflow.yml?branch=master)](https://github.com/visionary-ux/visionary-image/actions/workflows/ci-cd-workflow.yml?query=branch%3Amaster) [![npm package size (minzipped, via Bundlephobia)](https://img.shields.io/bundlephobia/minzip/visionary-image?color=blue)](https://bundlephobia.com/package/visionary-image) ![NPM Downloads](https://img.shields.io/npm/d18m/visionary-image?color=lightgray) [![Storybook demo](https://img.shields.io/badge/-Storybook-FF4785?logo=storybook&logoColor=white)](https://visionary-ux.github.io/visionary-image/)
 
 ## Features
 

package/dist/visionary-image.es.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_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 T, jsxs as wt } from "react/jsx-runtime";
-import { useRef as Y, useCallback as q, useState as It, useEffect as Et, useLayoutEffect as Rt, useMemo as At } from "react";
+import { jsx as U, jsxs as yt } from "react/jsx-runtime";
+import { useRef as Y, useCallback as q, useState as Rt, useEffect as At, useLayoutEffect as It, useMemo as Et } from "react";
 function xt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
@@ -40,44 +40,47 @@ var et = { exports: {} };
     t.exports ? (e.default = e, t.exports = e) : window.classNames = e;
   })();
 })(et);
-var Ut = et.exports;
-const Nt = /* @__PURE__ */ xt(Ut), Ot = (t, { root: n, rootMargin: e, threshold: o } = {}, i = []) => {
+var Tt = et.exports;
+const Pt = /* @__PURE__ */ xt(Tt), Ot = (t, { root: n, rootMargin: e, threshold: o } = {}, i = []) => {
   const r = Y(null), s = Y(null);
   return q((c) => {
     r.current && s.current && (s.current.unobserve(r.current), s.current.disconnect(), s.current = null), c && (s.current = new IntersectionObserver(t, { root: n, rootMargin: e, threshold: o }), s.current.observe(c), r.current = c);
   }, [r, n, e, JSON.stringify(o), ...i]);
-}, Tt = ({ root: t, rootMargin: n, threshold: e, unobserveOnEnter: o, target: i, onEnter: r, onLeave: s, defaultInView: u } = {}, c = []) => {
-  const [a, p] = It({
+}, Ut = ({ root: t, rootMargin: n, threshold: e, unobserveOnEnter: o, target: i, onEnter: r, onLeave: s, defaultInView: u } = {}, c = []) => {
+  const [a, p] = Rt({
     inView: u || !1,
     entry: null,
     observer: null
-  }), l = q(([h], d) => {
-    const b = d.thresholds.some((g) => h.intersectionRatio >= g) && h.isIntersecting;
+  }), l = q(([m], d) => {
+    const v = d.thresholds.some((b) => m.intersectionRatio >= b) && m.isIntersecting;
     p({
-      inView: b,
-      entry: h,
+      inView: v,
+      entry: m,
       observer: d
-    }), b && o && (d.unobserve(h.target), d.disconnect()), b ? r == null || r(h, d) : s == null || s(h, d);
-  }, [r, s, o]), m = Ot(l, { root: t, rootMargin: n, threshold: e }, [o, ...c]);
-  return Et(() => {
-    i != null && i.current && m(i.current);
-  }, [i, m]), [m, a.inView, a.entry, a.observer];
-}, Ct = {
-  overflow: "hidden"
-}, Dt = ({ aspectRatio: t, children: n }) => /* @__PURE__ */ T("div", { style: { aspectRatio: t, ...Ct }, children: n });
-var $ = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))($ || {}), w = /* @__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))(w || {}), D = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(D || {});
-const Pt = "https://link.visionary.cloud";
-$.AUTO, w.lg;
+    }), v && o && (d.unobserve(m.target), d.disconnect()), v ? r == null || r(m, d) : s == null || s(m, d);
+  }, [r, s, o]), g = Ot(l, { root: t, rootMargin: n, threshold: e }, [o, ...c]);
+  return At(() => {
+    i != null && i.current && g(i.current);
+  }, [i, g]), [g, a.inView, a.entry, a.observer];
+}, V = {
+  ASPECT_RATIO_WRAPPER: "aspect-ratio-wrapper",
+  CANVAS: "canvas",
+  CONTAINER: "container",
+  IMAGE: "image"
+};
+var W = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))(W || {}), 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 || {}), N = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(N || {});
+const Ct = "https://link.visionary.cloud";
+W.AUTO, y.lg;
 const Z = {
-  [w.xs]: 160,
-  [w.sm]: 320,
-  [w.md]: 640,
-  [w.lg]: 1280,
-  [w.xl]: 1920,
-  [w.xxl]: 2560,
-  [w["4k"]]: 3840,
-  [w["5k"]]: 5120,
-  [w.full]: 0
+  [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(Z).reduce(
   (t, n) => {
@@ -87,95 +90,95 @@ Object.keys(Z).reduce(
   {}
 );
 const rt = "!";
-var St = Object.defineProperty, _t = (t, n, e) => n in t ? St(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, Lt = (t, n, e) => _t(t, typeof n != "symbol" ? n + "" : n, e), J = {}, j = {};
-Object.defineProperty(j, "__esModule", { value: !0 });
-function Vt(t) {
+var Nt = Object.defineProperty, _t = (t, n, e) => n in t ? Nt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, Dt = (t, n, e) => _t(t, typeof n != "symbol" ? n + "" : n, e), J = {}, z = {};
+Object.defineProperty(z, "__esModule", { value: !0 });
+function Lt(t) {
   return String.fromCharCode(parseInt(t.slice(1), 16));
 }
-function $t(t) {
-  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Vt));
+function St(t) {
+  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Lt));
 }
-j.encode = $t;
-function jt(t) {
+z.encode = St;
+function Vt(t) {
   return `%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`;
 }
-function kt(t) {
-  return decodeURIComponent(Array.from(atob(t), jt).join(""));
+function $t(t) {
+  return decodeURIComponent(Array.from(atob(t), Vt).join(""));
 }
-j.decode = kt;
+z.decode = $t;
 Object.defineProperty(J, "__esModule", { value: !0 });
-const ot = j;
-function zt(t) {
+const ot = z;
+function jt(t) {
   return ot.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
 }
-var Bt = J.decode = zt;
-function Mt(t) {
+var kt = J.decode = jt;
+function Wt(t) {
   return ot.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
 }
-var Wt = J.encode = Mt;
-const Gt = (t) => t.filter(Boolean), Q = (t) => {
+var zt = J.encode = Wt;
+const Bt = (t) => t.filter(Boolean), Q = (t) => {
   try {
     return new URL(t);
   } catch {
     return null;
   }
-}, k = (t = "") => /^[A-Za-z0-9_-]*$/.test(t), Ft = (t) => {
+}, B = (t = "") => /^[A-Za-z0-9_-]*$/.test(t), Mt = (t) => {
   const { altText: n, bcc: e, blurhash: o, blurhashX: i, blurhashY: r, sourceHeight: s, sourceWidth: u, url: c } = t;
   if (!c || !u || !s)
     return new Error("Cannot construct visionary code: missing required url/width/height");
   const a = [c, u, s];
-  return !e || (a.push(e), !o || !i || !r) || (a.push(o, i, r), n && n.length && a.push(n)), Ht(a);
-}, Ht = (t) => Wt(t.join(rt)), st = (t) => {
+  return !e || (a.push(e), !o || !i || !r) || (a.push(o, i, r), n && n.length && a.push(n)), Gt(a);
+}, Gt = (t) => zt(t.join(rt)), st = (t) => {
   if (typeof t != "string")
     return null;
   const n = t.trim();
-  if (!n.length || !k(n))
+  if (!n.length || !B(n))
     return null;
-  const e = Bt(n);
+  const e = kt(n);
   if (!e)
     return null;
   const o = e.split(rt);
   if (o.length < 3)
     return null;
-  const [i, r, s, u, c, a, p, l] = o, m = i.trim();
-  if (!m.length)
+  const [i, r, s, u, c, a, p, l] = o, g = i.trim();
+  if (!g.length)
     return console.error("Cannot parse code, empty file id"), null;
-  const h = Number(r.trim()), d = Number(s.trim());
-  if (isNaN(h) || isNaN(d) || !h || !d)
+  const m = Number(r.trim()), d = Number(s.trim());
+  if (isNaN(m) || isNaN(d) || !m || !d)
     return console.error("Cannot parse Visionary Code: invalid image dimensions", r, s), null;
-  const v = Number(a) ?? 0, b = Number(p) ?? 0;
-  return v < 1 || b < 1 ? (console.error(
+  const w = Number(a) ?? 0, v = Number(p) ?? 0;
+  return w < 1 || v < 1 ? (console.error(
     "Cannot parse Visionary Code: invalid blurhash x, y component dimensions",
-    v,
-    b
+    w,
+    v
   ), null) : {
     altText: l,
     bcc: u,
     blurhash: c,
-    blurhashX: v,
-    blurhashY: b,
+    blurhashX: w,
+    blurhashY: v,
     sourceHeight: d,
-    sourceWidth: h,
-    url: m
+    sourceWidth: m,
+    url: g
   };
 };
-class Xt extends Error {
+class Ft extends Error {
   constructor() {
-    super(...arguments), Lt(this, "message", "invalid endpoint URL (does it contain http/https?)");
+    super(...arguments), Dt(this, "message", "invalid endpoint URL (does it contain http/https?)");
   }
 }
-const Yt = (t) => t === D.DEBUG, Zt = (t) => t === D.DOWNLOAD, qt = (t) => Object.values($).includes(t), ct = (t) => Object.values(w).includes(t), Jt = (t = []) => {
+const Ht = (t) => t === N.DEBUG, Xt = (t) => t === N.DOWNLOAD, Yt = (t) => Object.values(W).includes(t), ct = (t) => Object.values(y).includes(t), Zt = (t = []) => {
   const n = {};
   for (const e of t)
-    ct(e) ? n.size = w[e] : Yt(e) ? n.debug = !0 : Zt(e) ? n.download = !0 : qt(e) && (n.format = e);
+    ct(e) ? n.size = y[e] : Ht(e) ? n.debug = !0 : Xt(e) ? n.download = !0 : Yt(e) && (n.format = e);
   return n;
-}, Kt = (t) => {
+}, qt = (t) => {
   if (!t || typeof t != "object")
     return null;
   const n = [];
-  return t.debug && n.push(D.DEBUG), t.download && n.push(D.DOWNLOAD), t.format && t.format !== $.AUTO && n.push(t.format), t.size && ct(t.size) && n.push(t.size), n.length ? n.sort().join(",") : null;
-}, Qt = (t) => {
-  if (k(t)) {
+  return t.debug && n.push(N.DEBUG), t.download && n.push(N.DOWNLOAD), t.format && t.format !== W.AUTO && n.push(t.format), t.size && ct(t.size) && n.push(t.size), n.length ? n.sort().join(",") : null;
+}, Jt = (t) => {
+  if (B(t)) {
     const n = st(t);
     if (n)
       return {
@@ -183,21 +186,21 @@ const Yt = (t) => t === D.DEBUG, Zt = (t) => t === D.DOWNLOAD, qt = (t) => Objec
         options: {}
       };
   }
-  return tn(t);
-}, tn = (t) => {
+  return Kt(t);
+}, Kt = (t) => {
   if (!t)
     return null;
   const n = t.trim();
   if (!n)
     return null;
   try {
-    const e = en(n);
+    const e = tn(n);
     if (!e)
       return null;
     const { code: o, optionTokens: i } = e, r = st(o);
     if (!r)
       return null;
-    const s = Jt(i);
+    const s = Zt(i);
     return {
       fields: r,
       options: s
@@ -206,25 +209,25 @@ const Yt = (t) => t === D.DEBUG, Zt = (t) => t === D.DOWNLOAD, qt = (t) => Objec
     e instanceof Error ? console.error(`Error parsing URL: ${e.message}`, e) : console.error("uncaught error", e);
   }
   return null;
-}, nn = (t, n) => {
-  const e = Ft(t);
+}, Qt = (t, n) => {
+  const e = Mt(t);
   if (e instanceof Error)
     return null;
   let o = null;
   if (n != null && n.endpoint && (o = Q(n == null ? void 0 : n.endpoint), !o))
-    throw new Xt(
+    throw new Ft(
       "Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://"
     );
-  o || (o = Q(Pt));
-  const i = [o.origin, "image", e], r = n ? Kt(n) : null;
+  o || (o = Q(Ct));
+  const i = [o.origin, "image", e], r = n ? qt(n) : null;
   return r && i.push(r), n != null && n.filename ? i.push(n.filename) : i.push("image.jpg"), i.join("/");
-}, en = (t) => {
+}, tn = (t) => {
   try {
-    const n = new URL(t), e = Gt(n.pathname.split("/"));
+    const n = new URL(t), e = Bt(n.pathname.split("/"));
     if (e[0] !== "image" || ![3, 4].includes(e.length))
       throw new Error("Unrecognized URL");
     const o = e[1].trim();
-    if (!o.length || !k(o))
+    if (!o.length || !B(o))
       throw new Error("URL is not formatted as base64url");
     if (e.length === 4) {
       const i = e[2].split(",");
@@ -242,117 +245,119 @@ const Yt = (t) => t === D.DEBUG, Zt = (t) => t === D.DOWNLOAD, qt = (t) => Objec
     return null;
   }
   return null;
-}, it = 0.7, at = 1, U = 24, rn = w.lg, lt = process.env.NODE_ENV, on = lt === "development", ut = typeof document > "u", sn = lt === "test", cn = ut ? () => {
-} : Rt, an = "<visionary>", x = (t, ...n) => {
-  !console || typeof console.log != "function" || console.log(`${an} ${t}`, ...n);
+}, it = 0.7, at = 1, T = 24, nn = y.lg, lt = process.env.NODE_ENV, en = lt === "development", ut = typeof document > "u", rn = lt === "test", k = (t) => {
+  try {
+    return new URL(t);
+  } catch {
+    return null;
+  }
+}, on = (t, n) => `rgba(${t.r},${t.g},${t.b},${n})`, $ = (t) => en || rn ? {
+  "data-testid": t
+} : {}, sn = (t, n) => n ? {
+  "data-fileid": t
+} : {}, tt = (t, n) => Math.min(t, n), cn = (t) => {
+  let n = t.replace(/^#/, "");
+  if (n.length !== 3 && n.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 };
+}, E = (t, n = 0) => {
+  const e = Math.pow(10, n);
+  return Math.round(t * e) / e;
+}, an = (t, n) => {
+  const e = k(t), o = k(n);
+  return !e || !o ? t : (o.pathname = e.pathname, o.search = e.search, o.toString());
+}, ln = {
+  overflow: "hidden"
+}, un = ({ aspectRatio: t, children: n }) => /* @__PURE__ */ U("div", { style: { aspectRatio: t, ...ln }, ...$(V.ASPECT_RATIO_WRAPPER), children: n }), dn = ut ? () => {
+} : It, fn = "<visionary>", x = (t, ...n) => {
+  !console || typeof console.log != "function" || console.log(`${fn} ${t}`, ...n);
 }, dt = new Uint8Array(128);
 for (let t = 0; t < 83; t++)
   dt["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(
     t
   )] = t;
-const L = (t, n, e) => {
+const j = (t, n, e) => {
   let o = 0;
   for (; n < e; )
     o *= 83, o += dt[t.charCodeAt(n++)];
   return o;
-}, ft = Math.pow, P = Math.PI, ln = P * 2, pt = 3294.6, ht = 269.025, un = (t) => t > 10.31475 ? ft(t / ht + 0.052132, 2.4) : t / pt, G = (t) => ~~(t > 1227e-8 ? ht * ft(t, 0.416666) - 13.025 : t * pt + 1), C = (t) => (t < 0 ? -1 : 1) * t * t, tt = (t) => {
-  for (t += P / 2; t > P; )
-    t -= ln;
+}, ft = Math.pow, _ = Math.PI, pn = _ * 2, pt = 3294.6, ht = 269.025, hn = (t) => t > 10.31475 ? ft(t / ht + 0.052132, 2.4) : t / pt, H = (t) => ~~(t > 1227e-8 ? ht * ft(t, 0.416666) - 13.025 : t * pt + 1), C = (t) => (t < 0 ? -1 : 1) * t * t, nt = (t) => {
+  for (t += _ / 2; t > _; )
+    t -= pn;
   const n = 1.27323954 * t - 0.405284735 * C(t);
   return 0.225 * (C(n) - n) + n;
 };
-function dn(t) {
-  const n = L(t, 2, 6);
+function mn(t) {
+  const n = j(t, 2, 6);
   return [n >> 16, n >> 8 & 255, n & 255];
 }
-function fn(t, n, e, o) {
-  const i = L(t, 0, 1), r = i % 9 + 1, s = ~~(i / 9) + 1, u = r * s;
-  let c = 0, a = 0, p = 0, l = 0, m = 0, h = 0, d = 0, v = 0, b = 0, g = 0, y = 0, E = 0;
-  const f = (L(t, 1, 2) + 1) / 13446 * (o | 1), I = new Float64Array(u * 3), z = dn(t);
+function gn(t, n, e, o) {
+  const i = j(t, 0, 1), r = i % 9 + 1, s = ~~(i / 9) + 1, u = r * s;
+  let c = 0, a = 0, p = 0, l = 0, g = 0, m = 0, d = 0, w = 0, v = 0, b = 0, h = 0, A = 0;
+  const f = (j(t, 1, 2) + 1) / 13446 * (o | 1), R = new Float64Array(u * 3), M = mn(t);
   for (c = 0; c < 3; c++)
-    I[c] = un(z[c]);
+    R[c] = hn(M[c]);
   for (c = 1; c < u; c++)
-    E = L(t, 4 + c * 2, 6 + c * 2), I[c * 3] = C(~~(E / 361) - 9) * f, I[c * 3 + 1] = C(~~(E / 19) % 19 - 9) * f, I[c * 3 + 2] = C(E % 19 - 9) * f;
-  const S = new Float64Array(s * e), _ = new Float64Array(r * n);
+    A = j(t, 4 + c * 2, 6 + c * 2), R[c * 3] = C(~~(A / 361) - 9) * f, R[c * 3 + 1] = C(~~(A / 19) % 19 - 9) * f, R[c * 3 + 2] = C(A % 19 - 9) * f;
+  const D = new Float64Array(s * e), L = new Float64Array(r * n);
   for (a = 0; a < s; a++)
     for (l = 0; l < e; l++)
-      S[a * e + l] = tt(P * l * a / e);
+      D[a * e + l] = nt(_ * l * a / e);
   for (c = 0; c < r; c++)
     for (p = 0; p < n; p++)
-      _[c * n + p] = tt(P * p * c / n);
-  const N = n * 4, R = new Uint8ClampedArray(N * e);
+      L[c * n + p] = nt(_ * p * c / n);
+  const P = n * 4, I = new Uint8ClampedArray(P * e);
   for (l = 0; l < e; l++)
     for (p = 0; p < n; p++) {
-      for (m = h = d = 0, a = 0; a < s; a++)
-        for (b = S[a * e + l], c = 0; c < r; c++)
-          v = _[c * n + p] * b, g = (c + a * r) * 3, m += I[g] * v, h += I[g + 1] * v, d += I[g + 2] * v;
-      y = 4 * p + l * N, R[y] = G(m), R[y + 1] = G(h), R[y + 2] = G(d), R[y + 3] = 255;
+      for (g = m = d = 0, a = 0; a < s; a++)
+        for (v = D[a * e + l], c = 0; c < r; c++)
+          w = L[c * n + p] * v, b = (c + a * r) * 3, g += R[b] * w, m += R[b + 1] * w, d += R[b + 2] * w;
+      h = 4 * p + l * P, I[h] = H(g), I[h + 1] = H(m), I[h + 2] = H(d), I[h + 3] = 255;
     }
-  return R;
+  return I;
 }
-const V = (t) => {
-  try {
-    return new URL(t);
-  } catch {
-    return null;
-  }
-}, pn = (t, n) => `rgba(${t.r},${t.g},${t.b},${n})`, F = (t) => on || sn ? {
-  "data-testid": t
-} : {}, hn = (t, n) => n ? {
-  "data-fileid": t
-} : {}, nt = (t, n) => Math.min(t, n), mn = (t) => {
-  let n = t.replace(/^#/, "");
-  if (n.length !== 3 && n.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;
-}, gn = (t, n) => {
-  const e = V(t), o = V(n);
-  return !e || !o ? t : (o.pathname = e.pathname, o.search = e.search, o.toString());
-}, bn = (t, n = {}, e = it, o = at) => {
+const bn = (t, n = {}, e = it, o = at) => {
   if (!t)
     return null;
   try {
     n.debug && x("input imageSrc:", t);
-    const i = Qt(t);
+    const i = Jt(t);
     if (n.debug && x("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 u = r.sourceWidth / r.sourceHeight, c = (n == null ? void 0 : n.size) ?? s.size ?? rn, a = Z[c];
-    let p = 0, l = 0, m = 0;
+    const u = r.sourceWidth / r.sourceHeight, c = (n == null ? void 0 : n.size) ?? s.size ?? nn, a = Z[c];
+    let p = 0, l = 0, g = 0;
     if (u >= 1) {
-      l = p = nt(a, r.sourceWidth);
-      const g = A(l / u);
-      m = A(l / g, 6);
+      l = p = tt(a, r.sourceWidth);
+      const b = E(l / u);
+      g = E(l / b, 6);
     } else
-      p = nt(a, r.sourceHeight), l = A(p * u), m = A(l / p, 6);
-    const h = A(100 / m, 6), d = {
+      p = tt(a, r.sourceHeight), l = E(p * u), g = E(l / p, 6);
+    const m = E(100 / g, 6), d = {
       ...r,
-      arPaddingTop: `${h}%`,
-      aspectRatio: m,
+      arPaddingTop: `${m}%`,
+      aspectRatio: g,
       maxWidth: l,
       src: t
-    }, v = V(r.url);
-    if (v)
-      d.src = v.toString();
-    else if (!V(t) && k(r.url)) {
-      const g = nn(r, {
+    }, w = k(r.url);
+    if (w)
+      d.src = w.toString();
+    else if (!k(t) && B(r.url)) {
+      const b = Qt(r, {
         endpoint: n.endpoint,
         size: c
       });
-      g && (d.src = g);
+      b && (d.src = b);
     }
-    n.endpoint && (d.src = gn(d.src, n.endpoint));
-    const b = r.bcc ? mn(r.bcc) : null;
-    if (b && (d.backgroundColor = pn(b, e)), !ut && r.blurhash && !n.disableBlurLayer) {
-      const g = performance.now(), y = fn(r.blurhash, U, U, o), E = performance.now() - g;
-      n.debug && x(`Blurhash decode time: ${A(E, 1)} ms`), y && (d.pixels = y);
+    n.endpoint && (d.src = an(d.src, n.endpoint));
+    const v = r.bcc ? cn(r.bcc) : null;
+    if (v && (d.backgroundColor = on(v, e)), !ut && r.blurhash && !n.disableBlurLayer) {
+      const b = performance.now(), h = gn(r.blurhash, T, T, o), A = performance.now() - b;
+      n.debug && x(`Blurhash decode time: ${E(A, 1)} ms`), h && (d.pixels = h);
     }
     return n.debug && x("Visionary Image state: ", d), d;
   } catch {
@@ -368,23 +373,19 @@ const V = (t) => {
   ...mt,
   maxHeight: "100%",
   maxWidth: "100%"
-}, yn = {
+}, wn = {
   ...mt,
   height: "100%",
   width: "100%"
-}, wn = (t) => {
+}, yn = (t) => {
   const n = {
     ...vn
   };
   return t && (n.display = "none"), n;
-}, H = {
-  CANVAS: "canvas",
-  CONTAINER: "container",
-  IMAGE: "image"
-}, In = "v7y_7587", En = "v7y_b8c0", Rn = "v7y_e0dd", X = {
-  container: In,
-  preventDrag: En,
-  preventSelection: Rn
+}, Rn = "v7y_7587", An = "v7y_b8c0", In = "v7y_e0dd", X = {
+  container: Rn,
+  preventDrag: An,
+  preventSelection: In
 }, On = ({
   alt: t,
   bgColorAlpha: n = it,
@@ -398,114 +399,114 @@ const V = (t) => {
   lazy: a = !0,
   onClick: p,
   onError: l,
-  onLoad: m,
-  preventDrag: h = !1,
+  onLoad: g,
+  preventDrag: m = !1,
   preventSelection: d = !1,
-  punch: v = at,
-  size: b,
-  src: g,
-  style: y,
-  width: E
+  punch: w = at,
+  size: v,
+  src: b,
+  style: h,
+  width: A
 }) => {
-  const f = At(() => bn(g, {
+  const f = Et(() => bn(b, {
     debug: o,
     disableBlurLayer: i,
     endpoint: s,
-    size: b
-  }, n, v), [n, o, i, s, v, b, g]), I = Y(null), [z, S] = Tt();
-  cn(
+    size: v
+  }, n, w), [n, o, i, s, w, v, b]), R = Y(null), [M, D] = Ut();
+  dn(
     function() {
-      if (!I.current || !(f != null && f.blurhash))
+      if (!R.current || !(f != null && f.blurhash))
         return;
       if (!f.pixels) {
         console.warn("No pixel data passed in, skipping");
         return;
       }
-      const vt = performance.now(), M = I.current.getContext("2d");
-      if (!M) {
+      const vt = performance.now(), G = R.current.getContext("2d");
+      if (!G) {
         console.warn("Cannot access canvasRenderingContext, skipping");
         return;
       }
-      const W = M.createImageData(U, U);
-      if (!W) {
+      const F = G.createImageData(T, T);
+      if (!F) {
         console.warn("Could not create ImageData on CanvasRenderingContext");
         return;
       }
-      if (W.data.set(f.pixels), M.putImageData(W, 0, 0), o) {
-        const yt = performance.now() - vt;
-        x(`Canvas render time: ${A(yt, 1)} ms`);
+      if (F.data.set(f.pixels), G.putImageData(F, 0, 0), o) {
+        const wt = performance.now() - vt;
+        x(`Canvas render time: ${E(wt, 1)} ms`);
       }
     },
     [f == null ? void 0 : f.blurhash, f == null ? void 0 : f.pixels, o]
   );
-  const _ = q(
+  const L = q(
     (O) => {
       o && x("Image load error ", O), l && l();
     },
     [o, l]
-  ), N = {
+  ), P = {
     alt: t,
-    loading: !a || S ? "eager" : "lazy",
-    onLoad: m
+    loading: !a || D ? "eager" : "lazy",
+    onLoad: g
   };
   if (!f) {
     o && x("Not a Visionary URL, rendering fallback <img />");
     const O = {
-      ...N,
+      ...P,
       className: e,
       height: u,
       onClick: p,
       onError: l,
-      src: g,
-      style: y,
-      width: E
+      src: b,
+      style: h,
+      width: A
     };
-    return /* @__PURE__ */ T("img", { ...O });
+    return /* @__PURE__ */ U("img", { ...O });
   }
-  const R = Nt(X.container, e, {
-    [X.preventDrag]: !!h,
+  const I = Pt(X.container, e, {
+    [X.preventDrag]: !!m,
     [X.preventSelection]: !!d
-  }), B = {
+  }), S = {
     ...{
       "--v-ar": f.arPaddingTop
     },
-    ...y,
+    ...h,
     aspectRatio: f.aspectRatio,
     backgroundColor: (f == null ? void 0 : f.backgroundColor) ?? void 0,
     maxWidth: f.maxWidth,
     position: "relative",
     width: "100%"
   };
-  E && (B.width = E), u && (B.height = u);
+  A && (S.width = A), u && (S.height = u), h != null && h.maxWidth && (S.maxWidth = h.maxWidth);
   const gt = {
     onClick: p
-  }, bt = wn(c), K = /* @__PURE__ */ wt(
+  }, bt = yn(c), K = /* @__PURE__ */ yt(
     "div",
     {
-      className: R,
-      ref: z,
-      style: B,
-      ...hn(f.url, o),
-      ...F(H.CONTAINER),
+      className: I,
+      ref: M,
+      style: S,
+      ...sn(f.url, o),
+      ...$(V.CONTAINER),
       ...gt,
       children: [
-        !i && /* @__PURE__ */ T(
+        !i && /* @__PURE__ */ U(
           "canvas",
           {
-            height: U,
-            ref: I,
-            style: yn,
-            width: U,
-            ...F(H.CANVAS)
+            height: T,
+            ref: R,
+            style: wn,
+            width: T,
+            ...$(V.CANVAS)
           }
         ),
         !r && // eslint-disable-next-line jsx-a11y/alt-text -- `sharedImgProps` includes alt tag
-        /* @__PURE__ */ T(
+        /* @__PURE__ */ U(
           "img",
           {
-            ...N,
-            ...F(H.IMAGE),
-            onError: _,
+            ...P,
+            ...$(V.IMAGE),
+            onError: L,
             src: f.src,
             style: bt
           }
@@ -513,7 +514,7 @@ const V = (t) => {
       ]
     }
   );
-  return y != null && y.aspectRatio ? /* @__PURE__ */ T(Dt, { aspectRatio: y.aspectRatio, children: K }) : K;
+  return h != null && h.aspectRatio ? /* @__PURE__ */ U(un, { aspectRatio: h.aspectRatio, children: K }) : K;
 };
 export {
   On 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_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(R,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],x):(R=typeof globalThis<"u"?globalThis:R||self,x(R.VisionaryImage={},R.jsxRuntime,R.React))})(this,function(R,x,E){"use strict";function gt(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var K={exports:{}};/*!
+(function(E,A){typeof exports=="object"&&typeof module<"u"?A(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],A):(E=typeof globalThis<"u"?globalThis:E||self,A(E.VisionaryImage={},E.jsxRuntime,E.React))})(this,function(E,A,R){"use strict";function gt(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(t){(function(){var e={}.hasOwnProperty;function n(){for(var r="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(r=i(r,o(u)))}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 u in r)e.call(r,u)&&r[u]&&(s=i(s,u));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 bt=K.exports;const vt=gt(bt),yt=(t,{root:e,rootMargin:n,threshold:o}={},i=[])=>{const r=E.useRef(null),s=E.useRef(null);return E.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])},wt=({root:t,rootMargin:e,threshold:n,unobserveOnEnter:o,target:i,onEnter:r,onLeave:s,defaultInView:u}={},c=[])=>{const[a,p]=E.useState({inView:u||!1,entry:null,observer:null}),l=E.useCallback(([h],f)=>{const b=f.thresholds.some(g=>h.intersectionRatio>=g)&&h.isIntersecting;p({inView:b,entry:h,observer:f}),b&&o&&(f.unobserve(h.target),f.disconnect()),b?r==null||r(h,f):s==null||s(h,f)},[r,s,o]),m=yt(l,{root:t,rootMargin:e,threshold:n},[o,...c]);return E.useEffect(()=>{i!=null&&i.current&&m(i.current)},[i,m]),[m,a.inView,a.entry,a.observer]},It={overflow:"hidden"},xt=({aspectRatio:t,children:e})=>x.jsx("div",{style:{aspectRatio:t,...It},children:e});var j=(t=>(t.AUTO="auto",t.AVIF="avif",t.JPEG="jpeg",t.WEBP="webp",t))(j||{}),w=(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))(w||{}),O=(t=>(t.DEBUG="debug",t.DOWNLOAD="download",t))(O||{});const Et="https://link.visionary.cloud";j.AUTO,w.lg;const M={[w.xs]:160,[w.sm]:320,[w.md]:640,[w.lg]:1280,[w.xl]:1920,[w.xxl]:2560,[w["4k"]]:3840,[w["5k"]]:5120,[w.full]:0};Object.keys(M).reduce((t,e)=>{const n=e,o=M[n];return o&&(t[o]=n),t},{});const Q="!";var At=Object.defineProperty,Rt=(t,e,n)=>e in t?At(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,Tt=(t,e,n)=>Rt(t,typeof e!="symbol"?e+"":e,n),W={},V={};Object.defineProperty(V,"__esModule",{value:!0});function Ut(t){return String.fromCharCode(parseInt(t.slice(1),16))}function Ct(t){return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g,Ut))}V.encode=Ct;function Nt(t){return`%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`}function Ot(t){return decodeURIComponent(Array.from(atob(t),Nt).join(""))}V.decode=Ot,Object.defineProperty(W,"__esModule",{value:!0});const tt=V;function St(t){return tt.decode(t.replace(/\-/g,"+").replace(/_/g,"/"))}var Dt=W.decode=St;function Pt(t){return tt.encode(t).replace(/\//g,"_").replace(/\+/g,"-").replace(/=+$/,"")}var _t=W.encode=Pt;const jt=t=>t.filter(Boolean),et=t=>{try{return new URL(t)}catch{return null}},L=(t="")=>/^[A-Za-z0-9_-]*$/.test(t),Vt=t=>{const{altText:e,bcc:n,blurhash:o,blurhashX:i,blurhashY:r,sourceHeight:s,sourceWidth:u,url:c}=t;if(!c||!u||!s)return new Error("Cannot construct visionary code: missing required url/width/height");const a=[c,u,s];return!n||(a.push(n),!o||!i||!r)||(a.push(o,i,r),e&&e.length&&a.push(e)),Lt(a)},Lt=t=>_t(t.join(Q)),nt=t=>{if(typeof t!="string")return null;const e=t.trim();if(!e.length||!L(e))return null;const n=Dt(e);if(!n)return null;const o=n.split(Q);if(o.length<3)return null;const[i,r,s,u,c,a,p,l]=o,m=i.trim();if(!m.length)return console.error("Cannot parse code, empty file id"),null;const h=Number(r.trim()),f=Number(s.trim());if(isNaN(h)||isNaN(f)||!h||!f)return console.error("Cannot parse Visionary Code: invalid image dimensions",r,s),null;const v=Number(a)??0,b=Number(p)??0;return v<1||b<1?(console.error("Cannot parse Visionary Code: invalid blurhash x, y component dimensions",v,b),null):{altText:l,bcc:u,blurhash:c,blurhashX:v,blurhashY:b,sourceHeight:f,sourceWidth:h,url:m}};class $t extends Error{constructor(){super(...arguments),Tt(this,"message","invalid endpoint URL (does it contain http/https?)")}}const kt=t=>t===O.DEBUG,zt=t=>t===O.DOWNLOAD,Bt=t=>Object.values(j).includes(t),rt=t=>Object.values(w).includes(t),Mt=(t=[])=>{const e={};for(const n of t)rt(n)?e.size=w[n]:kt(n)?e.debug=!0:zt(n)?e.download=!0:Bt(n)&&(e.format=n);return e},Wt=t=>{if(!t||typeof t!="object")return null;const e=[];return t.debug&&e.push(O.DEBUG),t.download&&e.push(O.DOWNLOAD),t.format&&t.format!==j.AUTO&&e.push(t.format),t.size&&rt(t.size)&&e.push(t.size),e.length?e.sort().join(","):null},Gt=t=>{if(L(t)){const e=nt(t);if(e)return{fields:e,options:{}}}return Ft(t)},Ft=t=>{if(!t)return null;const e=t.trim();if(!e)return null;try{const n=Xt(e);if(!n)return null;const{code:o,optionTokens:i}=n,r=nt(o);if(!r)return null;const s=Mt(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},Ht=(t,e)=>{const n=Vt(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(Et));const i=[o.origin,"image",n],r=e?Wt(e):null;return r&&i.push(r),e!=null&&e.filename?i.push(e.filename):i.push("image.jpg"),i.join("/")},Xt=t=>{try{const e=new URL(t),n=jt(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||!L(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,N=24,Yt=w.lg,ct=process.env.NODE_ENV,qt=ct==="development",it=typeof document>"u",Zt=ct==="test",Jt=it?()=>{}:E.useLayoutEffect,Kt="<visionary>",T=(t,...e)=>{!console||typeof console.log!="function"||console.log(`${Kt} ${t}`,...e)},at=new Uint8Array(128);for(let t=0;t<83;t++)at["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(t)]=t;const $=(t,e,n)=>{let o=0;for(;e<n;)o*=83,o+=at[t.charCodeAt(e++)];return o},lt=Math.pow,S=Math.PI,Qt=S*2,ut=3294.6,ft=269.025,te=t=>t>10.31475?lt(t/ft+.052132,2.4):t/ut,G=t=>~~(t>1227e-8?ft*lt(t,.416666)-13.025:t*ut+1),D=t=>(t<0?-1:1)*t*t,dt=t=>{for(t+=S/2;t>S;)t-=Qt;const e=1.27323954*t-.405284735*D(t);return .225*(D(e)-e)+e};function ee(t){const e=$(t,2,6);return[e>>16,e>>8&255,e&255]}function ne(t,e,n,o){const i=$(t,0,1),r=i%9+1,s=~~(i/9)+1,u=r*s;let c=0,a=0,p=0,l=0,m=0,h=0,f=0,v=0,b=0,g=0,y=0,A=0;const d=($(t,1,2)+1)/13446*(o|1),I=new Float64Array(u*3),Y=ee(t);for(c=0;c<3;c++)I[c]=te(Y[c]);for(c=1;c<u;c++)A=$(t,4+c*2,6+c*2),I[c*3]=D(~~(A/361)-9)*d,I[c*3+1]=D(~~(A/19)%19-9)*d,I[c*3+2]=D(A%19-9)*d;const z=new Float64Array(s*n),B=new Float64Array(r*e);for(a=0;a<s;a++)for(l=0;l<n;l++)z[a*n+l]=dt(S*l*a/n);for(c=0;c<r;c++)for(p=0;p<e;p++)B[c*e+p]=dt(S*p*c/e);const P=e*4,C=new Uint8ClampedArray(P*n);for(l=0;l<n;l++)for(p=0;p<e;p++){for(m=h=f=0,a=0;a<s;a++)for(b=z[a*n+l],c=0;c<r;c++)v=B[c*e+p]*b,g=(c+a*r)*3,m+=I[g]*v,h+=I[g+1]*v,f+=I[g+2]*v;y=4*p+l*P,C[y]=G(m),C[y+1]=G(h),C[y+2]=G(f),C[y+3]=255}return C}const k=t=>{try{return new URL(t)}catch{return null}},re=(t,e)=>`rgba(${t.r},${t.g},${t.b},${e})`,F=t=>qt||Zt?{"data-testid":t}:{},oe=(t,e)=>e?{"data-fileid":t}:{},pt=(t,e)=>Math.min(t,e),se=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}},U=(t,e=0)=>{const n=Math.pow(10,e);return Math.round(t*n)/n},ce=(t,e)=>{const n=k(t),o=k(e);return!n||!o?t:(o.pathname=n.pathname,o.search=n.search,o.toString())},ie=(t,e={},n=ot,o=st)=>{if(!t)return null;try{e.debug&&T("input imageSrc:",t);const i=Gt(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 u=r.sourceWidth/r.sourceHeight,c=(e==null?void 0:e.size)??s.size??Yt,a=M[c];let p=0,l=0,m=0;if(u>=1){l=p=pt(a,r.sourceWidth);const g=U(l/u);m=U(l/g,6)}else p=pt(a,r.sourceHeight),l=U(p*u),m=U(l/p,6);const h=U(100/m,6),f={...r,arPaddingTop:`${h}%`,aspectRatio:m,maxWidth:l,src:t},v=k(r.url);if(v)f.src=v.toString();else if(!k(t)&&L(r.url)){const g=Ht(r,{endpoint:e.endpoint,size:c});g&&(f.src=g)}e.endpoint&&(f.src=ce(f.src,e.endpoint));const b=r.bcc?se(r.bcc):null;if(b&&(f.backgroundColor=re(b,n)),!it&&r.blurhash&&!e.disableBlurLayer){const g=performance.now(),y=ne(r.blurhash,N,N,o),A=performance.now()-g;e.debug&&T(`Blurhash decode time: ${U(A,1)} ms`),y&&(f.pixels=y)}return e.debug&&T("Visionary Image state: ",f),f}catch{return null}},ht={bottom:0,left:0,position:"absolute",right:0,top:0},ae={...ht,maxHeight:"100%",maxWidth:"100%"},le={...ht,height:"100%",width:"100%"},ue=t=>{const e={...ae};return t&&(e.display="none"),e},H={CANVAS:"canvas",CONTAINER:"container",IMAGE:"image"},X={container:"v7y_7587",preventDrag:"v7y_b8c0",preventSelection:"v7y_e0dd"},fe=({alt:t,bgColorAlpha:e=ot,className:n,debug:o=!1,disableBlurLayer:i=!1,disableImageLayer:r=!1,endpoint:s,height:u,hideImageLayer:c=!1,lazy:a=!0,onClick:p,onError:l,onLoad:m,preventDrag:h=!1,preventSelection:f=!1,punch:v=st,size:b,src:g,style:y,width:A})=>{const d=E.useMemo(()=>ie(g,{debug:o,disableBlurLayer:i,endpoint:s,size:b},e,v),[e,o,i,s,v,b,g]),I=E.useRef(null),[Y,z]=wt();Jt(function(){if(!I.current||!(d!=null&&d.blurhash))return;if(!d.pixels){console.warn("No pixel data passed in, skipping");return}const he=performance.now(),Z=I.current.getContext("2d");if(!Z){console.warn("Cannot access canvasRenderingContext, skipping");return}const J=Z.createImageData(N,N);if(!J){console.warn("Could not create ImageData on CanvasRenderingContext");return}if(J.data.set(d.pixels),Z.putImageData(J,0,0),o){const me=performance.now()-he;T(`Canvas render time: ${U(me,1)} ms`)}},[d==null?void 0:d.blurhash,d==null?void 0:d.pixels,o]);const B=E.useCallback(_=>{o&&T("Image load error ",_),l&&l()},[o,l]),P={alt:t,loading:!a||z?"eager":"lazy",onLoad:m};if(!d){o&&T("Not a Visionary URL, rendering fallback <img />");const _={...P,className:n,height:u,onClick:p,onError:l,src:g,style:y,width:A};return x.jsx("img",{..._})}const C=vt(X.container,n,{[X.preventDrag]:!!h,[X.preventSelection]:!!f}),q={...{"--v-ar":d.arPaddingTop},...y,aspectRatio:d.aspectRatio,backgroundColor:(d==null?void 0:d.backgroundColor)??void 0,maxWidth:d.maxWidth,position:"relative",width:"100%"};A&&(q.width=A),u&&(q.height=u);const de={onClick:p},pe=ue(c),mt=x.jsxs("div",{className:C,ref:Y,style:q,...oe(d.url,o),...F(H.CONTAINER),...de,children:[!i&&x.jsx("canvas",{height:N,ref:I,style:le,width:N,...F(H.CANVAS)}),!r&&x.jsx("img",{...P,...F(H.IMAGE),onError:B,src:d.src,style:pe})]});return y!=null&&y.aspectRatio?x.jsx(xt,{aspectRatio:y.aspectRatio,children:mt}):mt};R.Image=fe,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});
+*/(function(t){(function(){var e={}.hasOwnProperty;function n(){for(var r="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(r=c(r,o(u)))}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 u in r)e.call(r,u)&&r[u]&&(s=c(s,u));return s}function c(r,s){return s?r?r+" "+s:r+s:r}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(K);var bt=K.exports;const vt=gt(bt),yt=(t,{root:e,rootMargin:n,threshold:o}={},c=[])=>{const r=R.useRef(null),s=R.useRef(null);return R.useCallback(i=>{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])},wt=({root:t,rootMargin:e,threshold:n,unobserveOnEnter:o,target:c,onEnter:r,onLeave:s,defaultInView:u}={},i=[])=>{const[a,p]=R.useState({inView:u||!1,entry:null,observer:null}),l=R.useCallback(([m],d)=>{const v=d.thresholds.some(b=>m.intersectionRatio>=b)&&m.isIntersecting;p({inView:v,entry:m,observer:d}),v&&o&&(d.unobserve(m.target),d.disconnect()),v?r==null||r(m,d):s==null||s(m,d)},[r,s,o]),g=yt(l,{root:t,rootMargin:e,threshold:n},[o,...i]);return R.useEffect(()=>{c!=null&&c.current&&g(c.current)},[c,g]),[g,a.inView,a.entry,a.observer]},j={ASPECT_RATIO_WRAPPER:"aspect-ratio-wrapper",CANVAS:"canvas",CONTAINER:"container",IMAGE:"image"};var V=(t=>(t.AUTO="auto",t.AVIF="avif",t.JPEG="jpeg",t.WEBP="webp",t))(V||{}),w=(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))(w||{}),U=(t=>(t.DEBUG="debug",t.DOWNLOAD="download",t))(U||{});const It="https://link.visionary.cloud";V.AUTO,w.lg;const F={[w.xs]:160,[w.sm]:320,[w.md]:640,[w.lg]:1280,[w.xl]:1920,[w.xxl]:2560,[w["4k"]]:3840,[w["5k"]]:5120,[w.full]:0};Object.keys(F).reduce((t,e)=>{const n=e,o=F[n];return o&&(t[o]=n),t},{});const Q="!";var At=Object.defineProperty,Rt=(t,e,n)=>e in t?At(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,xt=(t,e,n)=>Rt(t,typeof e!="symbol"?e+"":e,n),H={},L={};Object.defineProperty(L,"__esModule",{value:!0});function Et(t){return String.fromCharCode(parseInt(t.slice(1),16))}function Tt(t){return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g,Et))}L.encode=Tt;function Pt(t){return`%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`}function Ct(t){return decodeURIComponent(Array.from(atob(t),Pt).join(""))}L.decode=Ct,Object.defineProperty(H,"__esModule",{value:!0});const tt=L;function Ot(t){return tt.decode(t.replace(/\-/g,"+").replace(/_/g,"/"))}var Ut=H.decode=Ot;function Nt(t){return tt.encode(t).replace(/\//g,"_").replace(/\+/g,"-").replace(/=+$/,"")}var _t=H.encode=Nt;const Dt=t=>t.filter(Boolean),et=t=>{try{return new URL(t)}catch{return null}},$=(t="")=>/^[A-Za-z0-9_-]*$/.test(t),St=t=>{const{altText:e,bcc:n,blurhash:o,blurhashX:c,blurhashY:r,sourceHeight:s,sourceWidth:u,url:i}=t;if(!i||!u||!s)return new Error("Cannot construct visionary code: missing required url/width/height");const a=[i,u,s];return!n||(a.push(n),!o||!c||!r)||(a.push(o,c,r),e&&e.length&&a.push(e)),jt(a)},jt=t=>_t(t.join(Q)),nt=t=>{if(typeof t!="string")return null;const e=t.trim();if(!e.length||!$(e))return null;const n=Ut(e);if(!n)return null;const o=n.split(Q);if(o.length<3)return null;const[c,r,s,u,i,a,p,l]=o,g=c.trim();if(!g.length)return console.error("Cannot parse code, empty file id"),null;const m=Number(r.trim()),d=Number(s.trim());if(isNaN(m)||isNaN(d)||!m||!d)return console.error("Cannot parse Visionary Code: invalid image dimensions",r,s),null;const y=Number(a)??0,v=Number(p)??0;return y<1||v<1?(console.error("Cannot parse Visionary Code: invalid blurhash x, y component dimensions",y,v),null):{altText:l,bcc:u,blurhash:i,blurhashX:y,blurhashY:v,sourceHeight:d,sourceWidth:m,url:g}};class Vt extends Error{constructor(){super(...arguments),xt(this,"message","invalid endpoint URL (does it contain http/https?)")}}const Lt=t=>t===U.DEBUG,$t=t=>t===U.DOWNLOAD,kt=t=>Object.values(V).includes(t),rt=t=>Object.values(w).includes(t),Wt=(t=[])=>{const e={};for(const n of t)rt(n)?e.size=w[n]:Lt(n)?e.debug=!0:$t(n)?e.download=!0:kt(n)&&(e.format=n);return e},zt=t=>{if(!t||typeof t!="object")return null;const e=[];return t.debug&&e.push(U.DEBUG),t.download&&e.push(U.DOWNLOAD),t.format&&t.format!==V.AUTO&&e.push(t.format),t.size&&rt(t.size)&&e.push(t.size),e.length?e.sort().join(","):null},Bt=t=>{if($(t)){const e=nt(t);if(e)return{fields:e,options:{}}}return Mt(t)},Mt=t=>{if(!t)return null;const e=t.trim();if(!e)return null;try{const n=Ft(e);if(!n)return null;const{code:o,optionTokens:c}=n,r=nt(o);if(!r)return null;const s=Wt(c);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},Gt=(t,e)=>{const n=St(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 Vt("Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://");o||(o=et(It));const c=[o.origin,"image",n],r=e?zt(e):null;return r&&c.push(r),e!=null&&e.filename?c.push(e.filename):c.push("image.jpg"),c.join("/")},Ft=t=>{try{const e=new URL(t),n=Dt(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||!$(o))throw new Error("URL is not formatted as base64url");if(n.length===4){const c=n[2].split(",");return{code:o,optionTokens:c}}if(n.length===3)return{code:o,optionTokens:[]}}catch{return null}return null},ot=.7,st=1,O=24,Ht=w.lg,it=process.env.NODE_ENV,Xt=it==="development",ct=typeof document>"u",Yt=it==="test",k=t=>{try{return new URL(t)}catch{return null}},qt=(t,e)=>`rgba(${t.r},${t.g},${t.b},${e})`,W=t=>Xt||Yt?{"data-testid":t}:{},Zt=(t,e)=>e?{"data-fileid":t}:{},at=(t,e)=>Math.min(t,e),Jt=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}},T=(t,e=0)=>{const n=Math.pow(10,e);return Math.round(t*n)/n},Kt=(t,e)=>{const n=k(t),o=k(e);return!n||!o?t:(o.pathname=n.pathname,o.search=n.search,o.toString())},Qt={overflow:"hidden"},te=({aspectRatio:t,children:e})=>A.jsx("div",{style:{aspectRatio:t,...Qt},...W(j.ASPECT_RATIO_WRAPPER),children:e}),ee=ct?()=>{}:R.useLayoutEffect,ne="<visionary>",P=(t,...e)=>{!console||typeof console.log!="function"||console.log(`${ne} ${t}`,...e)},lt=new Uint8Array(128);for(let t=0;t<83;t++)lt["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(t)]=t;const z=(t,e,n)=>{let o=0;for(;e<n;)o*=83,o+=lt[t.charCodeAt(e++)];return o},ut=Math.pow,N=Math.PI,re=N*2,dt=3294.6,ft=269.025,oe=t=>t>10.31475?ut(t/ft+.052132,2.4):t/dt,X=t=>~~(t>1227e-8?ft*ut(t,.416666)-13.025:t*dt+1),_=t=>(t<0?-1:1)*t*t,pt=t=>{for(t+=N/2;t>N;)t-=re;const e=1.27323954*t-.405284735*_(t);return .225*(_(e)-e)+e};function se(t){const e=z(t,2,6);return[e>>16,e>>8&255,e&255]}function ie(t,e,n,o){const c=z(t,0,1),r=c%9+1,s=~~(c/9)+1,u=r*s;let i=0,a=0,p=0,l=0,g=0,m=0,d=0,y=0,v=0,b=0,h=0,x=0;const f=(z(t,1,2)+1)/13446*(o|1),I=new Float64Array(u*3),q=se(t);for(i=0;i<3;i++)I[i]=oe(q[i]);for(i=1;i<u;i++)x=z(t,4+i*2,6+i*2),I[i*3]=_(~~(x/361)-9)*f,I[i*3+1]=_(~~(x/19)%19-9)*f,I[i*3+2]=_(x%19-9)*f;const B=new Float64Array(s*n),M=new Float64Array(r*e);for(a=0;a<s;a++)for(l=0;l<n;l++)B[a*n+l]=pt(N*l*a/n);for(i=0;i<r;i++)for(p=0;p<e;p++)M[i*e+p]=pt(N*p*i/e);const D=e*4,C=new Uint8ClampedArray(D*n);for(l=0;l<n;l++)for(p=0;p<e;p++){for(g=m=d=0,a=0;a<s;a++)for(v=B[a*n+l],i=0;i<r;i++)y=M[i*e+p]*v,b=(i+a*r)*3,g+=I[b]*y,m+=I[b+1]*y,d+=I[b+2]*y;h=4*p+l*D,C[h]=X(g),C[h+1]=X(m),C[h+2]=X(d),C[h+3]=255}return C}const ce=(t,e={},n=ot,o=st)=>{if(!t)return null;try{e.debug&&P("input imageSrc:",t);const c=Bt(t);if(e.debug&&P("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 u=r.sourceWidth/r.sourceHeight,i=(e==null?void 0:e.size)??s.size??Ht,a=F[i];let p=0,l=0,g=0;if(u>=1){l=p=at(a,r.sourceWidth);const b=T(l/u);g=T(l/b,6)}else p=at(a,r.sourceHeight),l=T(p*u),g=T(l/p,6);const m=T(100/g,6),d={...r,arPaddingTop:`${m}%`,aspectRatio:g,maxWidth:l,src:t},y=k(r.url);if(y)d.src=y.toString();else if(!k(t)&&$(r.url)){const b=Gt(r,{endpoint:e.endpoint,size:i});b&&(d.src=b)}e.endpoint&&(d.src=Kt(d.src,e.endpoint));const v=r.bcc?Jt(r.bcc):null;if(v&&(d.backgroundColor=qt(v,n)),!ct&&r.blurhash&&!e.disableBlurLayer){const b=performance.now(),h=ie(r.blurhash,O,O,o),x=performance.now()-b;e.debug&&P(`Blurhash decode time: ${T(x,1)} ms`),h&&(d.pixels=h)}return e.debug&&P("Visionary Image state: ",d),d}catch{return null}},ht={bottom:0,left:0,position:"absolute",right:0,top:0},ae={...ht,maxHeight:"100%",maxWidth:"100%"},le={...ht,height:"100%",width:"100%"},ue=t=>{const e={...ae};return t&&(e.display="none"),e},Y={container:"v7y_7587",preventDrag:"v7y_b8c0",preventSelection:"v7y_e0dd"},de=({alt:t,bgColorAlpha:e=ot,className:n,debug:o=!1,disableBlurLayer:c=!1,disableImageLayer:r=!1,endpoint:s,height:u,hideImageLayer:i=!1,lazy:a=!0,onClick:p,onError:l,onLoad:g,preventDrag:m=!1,preventSelection:d=!1,punch:y=st,size:v,src:b,style:h,width:x})=>{const f=R.useMemo(()=>ce(b,{debug:o,disableBlurLayer:c,endpoint:s,size:v},e,y),[e,o,c,s,y,v,b]),I=R.useRef(null),[q,B]=wt();ee(function(){if(!I.current||!(f!=null&&f.blurhash))return;if(!f.pixels){console.warn("No pixel data passed in, skipping");return}const he=performance.now(),Z=I.current.getContext("2d");if(!Z){console.warn("Cannot access canvasRenderingContext, skipping");return}const J=Z.createImageData(O,O);if(!J){console.warn("Could not create ImageData on CanvasRenderingContext");return}if(J.data.set(f.pixels),Z.putImageData(J,0,0),o){const me=performance.now()-he;P(`Canvas render time: ${T(me,1)} ms`)}},[f==null?void 0:f.blurhash,f==null?void 0:f.pixels,o]);const M=R.useCallback(S=>{o&&P("Image load error ",S),l&&l()},[o,l]),D={alt:t,loading:!a||B?"eager":"lazy",onLoad:g};if(!f){o&&P("Not a Visionary URL, rendering fallback <img />");const S={...D,className:n,height:u,onClick:p,onError:l,src:b,style:h,width:x};return A.jsx("img",{...S})}const C=vt(Y.container,n,{[Y.preventDrag]:!!m,[Y.preventSelection]:!!d}),G={...{"--v-ar":f.arPaddingTop},...h,aspectRatio:f.aspectRatio,backgroundColor:(f==null?void 0:f.backgroundColor)??void 0,maxWidth:f.maxWidth,position:"relative",width:"100%"};x&&(G.width=x),u&&(G.height=u),h!=null&&h.maxWidth&&(G.maxWidth=h.maxWidth);const fe={onClick:p},pe=ue(i),mt=A.jsxs("div",{className:C,ref:q,style:G,...Zt(f.url,o),...W(j.CONTAINER),...fe,children:[!c&&A.jsx("canvas",{height:O,ref:I,style:le,width:O,...W(j.CANVAS)}),!r&&A.jsx("img",{...D,...W(j.IMAGE),onError:M,src:f.src,style:pe})]});return h!=null&&h.aspectRatio?A.jsx(te,{aspectRatio:h.aspectRatio,children:mt}):mt};E.Image=de,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "visionary-image",
   "description": "React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://visionary.cloud",
   "type": "module",
   "main": "./dist/visionary-image.umd.js",