visionary-image 1.0.1 → 1.0.2

package/dist/visionary-image.es.js

@@ -1,10 +1,10 @@
 (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) {
+import { useRef as Y, useCallback as q, useState as wt, useEffect as It, useLayoutEffect as Et, useMemo as At } from "react";
+function xt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var et = { exports: {} };
+var nt = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -12,11 +12,11 @@ var et = { exports: {} };
 */
 (function(t) {
   (function() {
-    var e = {}.hasOwnProperty;
-    function n() {
+    var n = {}.hasOwnProperty;
+    function e() {
       for (var r = "", s = 0; s < arguments.length; s++) {
-        var a = arguments[s];
-        a && (r = c(r, o(a)));
+        var u = arguments[s];
+        u && (r = i(r, o(u)));
       }
       return r;
     }
@@ -26,212 +26,212 @@ var et = { exports: {} };
       if (typeof r != "object")
         return "";
       if (Array.isArray(r))
-        return n.apply(null, r);
+        return e.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 = c(s, a));
+      for (var u in r)
+        n.call(r, u) && r[u] && (s = i(s, u));
       return s;
     }
-    function c(r, s) {
+    function i(r, s) {
       return s ? r ? r + " " + s : r + s : r;
     }
-    t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+    t.exports ? (e.default = e, t.exports = e) : window.classNames = e;
   })();
-})(et);
-var Rt = et.exports;
-const At = /* @__PURE__ */ Et(Rt), St = (t, { root: e, rootMargin: n, threshold: o } = {}, c = []) => {
+})(nt);
+var Rt = nt.exports;
+const St = /* @__PURE__ */ xt(Rt), Ut = (t, { root: n, rootMargin: e, threshold: o } = {}, i = []) => {
   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: 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,
+  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]);
+}, Nt = ({ root: t, rootMargin: n, threshold: e, unobserveOnEnter: o, target: i, onEnter: r, onLeave: s, defaultInView: u } = {}, c = []) => {
+  const [a, p] = wt({
+    inView: u || !1,
     entry: null,
     observer: null
-  }), f = q(([p], l) => {
-    const b = l.thresholds.some((g) => p.intersectionRatio >= g) && p.isIntersecting;
-    h({
+  }), l = q(([h], f) => {
+    const b = f.thresholds.some((g) => h.intersectionRatio >= g) && h.isIntersecting;
+    p({
       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 = 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];
+      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 = Ut(l, { root: t, rootMargin: n, threshold: e }, [o, ...c]);
+  return It(() => {
+    i != null && i.current && m(i.current);
+  }, [i, m]), [m, a.inView, a.entry, a.observer];
 };
-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 || {});
+var V = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))(V || {}), v = /* @__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))(v || {}), T = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(T || {});
 const Ot = "https://link.visionary.cloud";
-$.AUTO, y.lg;
+V.AUTO, v.lg;
 const Z = {
-  [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
+  [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(Z).reduce(
-  (t, e) => {
-    const n = e, o = Z[n];
-    return o && (t[o] = n), t;
+  (t, n) => {
+    const e = n, o = Z[e];
+    return o && (t[o] = e), 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 });
+const et = "!";
+var Tt = Object.defineProperty, Ct = (t, n, e) => n in t ? Tt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, Dt = (t, n, e) => Ct(t, typeof n != "symbol" ? n + "" : n, e), J = {}, $ = {};
+Object.defineProperty($, "__esModule", { value: !0 });
 function Pt(t) {
   return String.fromCharCode(parseInt(t.slice(1), 16));
 }
 function _t(t) {
   return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Pt));
 }
-L.encode = _t;
-function Ct(t) {
+$.encode = _t;
+function Lt(t) {
   return `%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`;
 }
 function Vt(t) {
-  return decodeURIComponent(Array.from(atob(t), Ct).join(""));
+  return decodeURIComponent(Array.from(atob(t), Lt).join(""));
 }
-L.decode = Vt;
+$.decode = Vt;
 Object.defineProperty(J, "__esModule", { value: !0 });
-const rt = L;
+const rt = $;
 function $t(t) {
   return rt.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
 }
-var Lt = J.decode = $t;
-function jt(t) {
+var jt = J.decode = $t;
+function kt(t) {
   return rt.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
 }
-var kt = J.encode = jt;
-const zt = (t) => t.filter(Boolean), K = (t) => {
+var zt = J.encode = kt;
+const Bt = (t) => t.filter(Boolean), K = (t) => {
   try {
     return new URL(t);
   } catch {
     return null;
   }
-}, 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)
+}, j = (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 d = [i, a, s];
-  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) => {
+  const a = [c, u, s];
+  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(et)), ot = (t) => {
   if (typeof t != "string")
     return null;
-  const e = t.trim();
-  if (!e.length || !j(e))
+  const n = t.trim();
+  if (!n.length || !j(n))
     return null;
-  const n = Lt(e);
-  if (!n)
+  const e = jt(n);
+  if (!e)
     return null;
-  const o = n.split(nt);
+  const o = e.split(et);
   if (o.length < 3)
     return null;
-  const [c, r, s, a, i, d, h, f] = o, m = c.trim();
+  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 p = Number(r.trim()), l = Number(s.trim());
-  if (isNaN(p) || isNaN(l) || !p || !l)
+  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(d) ?? 0, b = Number(h) ?? 0;
-  return v < 1 || b < 1 ? (console.error(
+  const y = Number(a) ?? 0, b = Number(p) ?? 0;
+  return y < 1 || b < 1 ? (console.error(
     "Cannot parse Visionary Code: invalid blurhash x, y component dimensions",
-    v,
+    y,
     b
   ), null) : {
-    altText: f,
-    bcc: a,
-    blurhash: i,
-    blurhashX: v,
+    altText: l,
+    bcc: u,
+    blurhash: c,
+    blurhashX: y,
     blurhashY: b,
-    sourceHeight: l,
-    sourceWidth: p,
+    sourceHeight: f,
+    sourceWidth: h,
     url: m
   };
 };
-class Gt extends Error {
+class Wt extends Error {
   constructor() {
     super(...arguments), Dt(this, "message", "invalid endpoint URL (does it contain http/https?)");
   }
 }
-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) => {
+const Ft = (t) => t === T.DEBUG, Ht = (t) => t === T.DOWNLOAD, Xt = (t) => Object.values(V).includes(t), st = (t) => Object.values(v).includes(t), Yt = (t = []) => {
+  const n = {};
+  for (const e of t)
+    st(e) ? n.size = v[e] : Ft(e) ? n.debug = !0 : Ht(e) ? n.download = !0 : Xt(e) && (n.format = e);
+  return n;
+}, Zt = (t) => {
   if (!t || typeof t != "object")
     return 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) => {
+  const n = [];
+  return t.debug && n.push(T.DEBUG), t.download && n.push(T.DOWNLOAD), t.format && t.format !== V.AUTO && n.push(t.format), t.size && st(t.size) && n.push(t.size), n.length ? n.sort().join(",") : null;
+}, qt = (t) => {
   if (j(t)) {
-    const e = ot(t);
-    if (e)
+    const n = ot(t);
+    if (n)
       return {
-        fields: e,
+        fields: n,
         options: {}
       };
   }
-  return qt(t);
-}, qt = (t) => {
+  return Jt(t);
+}, Jt = (t) => {
   if (!t)
     return null;
-  const e = t.trim();
-  if (!e)
+  const n = t.trim();
+  if (!n)
     return null;
   try {
-    const n = Kt(e);
-    if (!n)
+    const e = Qt(n);
+    if (!e)
       return null;
-    const { code: o, optionTokens: c } = n, r = ot(o);
+    const { code: o, optionTokens: i } = e, r = ot(o);
     if (!r)
       return null;
-    const s = Xt(c);
+    const s = Yt(i);
     return {
       fields: r,
       options: s
     };
-  } catch (n) {
-    n instanceof Error ? console.error(`Error parsing URL: ${n.message}`, n) : console.error("uncaught error", n);
+  } catch (e) {
+    e instanceof Error ? console.error(`Error parsing URL: ${e.message}`, e) : console.error("uncaught error", e);
   }
   return null;
-}, Jt = (t, e) => {
-  const n = Bt(t);
-  if (n instanceof Error)
+}, Kt = (t, n) => {
+  const e = Mt(t);
+  if (e instanceof Error)
     return null;
   let o = null;
-  if (e != null && e.endpoint && (o = K(e == null ? void 0 : e.endpoint), !o))
-    throw new Gt(
+  if (n != null && n.endpoint && (o = K(n == null ? void 0 : n.endpoint), !o))
+    throw new Wt(
       "Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://"
     );
   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) => {
+  const i = [o.origin, "image", e], r = n ? Zt(n) : null;
+  return r && i.push(r), n != null && n.filename ? i.push(n.filename) : i.push("image.jpg"), i.join("/");
+}, Qt = (t) => {
   try {
-    const e = new URL(t), n = zt(e.pathname.split("/"));
-    if (n[0] !== "image" || ![3, 4].includes(n.length))
+    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 = n[1].trim();
+    const o = e[1].trim();
     if (!o.length || !j(o))
       throw new Error("URL is not formatted as base64url");
-    if (n.length === 4) {
-      const c = n[2].split(",");
+    if (e.length === 4) {
+      const i = e[2].split(",");
       return {
         code: o,
-        optionTokens: c
+        optionTokens: i
       };
     }
-    if (n.length === 3)
+    if (e.length === 3)
       return {
         code: o,
         optionTokens: []
@@ -240,249 +240,261 @@ const Wt = (t) => t === P.DEBUG, Ft = (t) => t === P.DOWNLOAD, Ht = (t) => Objec
     return null;
   }
   return null;
-}, 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) => {
+}, ct = 0.7, it = 1, S = 24, tn = v.lg, at = process.env.NODE_ENV, nn = at === "development", lt = typeof document > "u", en = at === "test", rn = lt ? () => {
+} : Et, on = "<visionary>", R = (t, ...n) => {
+  !console || typeof console.log != "function" || console.log(`${on} ${t}`, ...n);
+}, ut = new Uint8Array(128);
+for (let t = 0; t < 83; t++)
+  ut["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(
+    t
+  )] = t;
+const _ = (t, n, e) => {
   let o = 0;
-  for (; e < n; )
-    o *= 83, o += oe.indexOf(t[e++]);
+  for (; n < e; )
+    o *= 83, o += ut[t.charCodeAt(n++)];
   return o;
-}, 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;
+}, ft = Math.pow, C = Math.PI, sn = C * 2, dt = 3294.6, pt = 269.025, cn = (t) => t > 10.31475 ? ft(t / pt + 0.052132, 2.4) : t / dt, W = (t) => ~~(t > 1227e-8 ? pt * ft(t, 0.416666) - 13.025 : t * dt + 1), O = (t) => (t < 0 ? -1 : 1) * t * t, Q = (t) => {
+  for (t += C / 2; t > C; )
+    t -= sn;
+  const n = 1.27323954 * t - 0.405284735 * O(t);
+  return 0.225 * (O(n) - n) + n;
 };
-function ie(t) {
-  const e = C(t, 2, 6);
-  return [e >> 16, e >> 8 & 255, e & 255];
+function an(t) {
+  const n = _(t, 2, 6);
+  return [n >> 16, n >> 8 & 255, n & 255];
 }
-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++)
-    I[i] = ce(k[i]);
-  for (i = 1; i < a; i++)
-    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;
+function ln(t, n, e, 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, y = 0, b = 0, g = 0, w = 0, E = 0;
+  const d = (_(t, 1, 2) + 1) / 13446 * (o | 1), I = new Float64Array(u * 3), k = an(t);
+  for (c = 0; c < 3; c++)
+    I[c] = cn(k[c]);
+  for (c = 1; c < u; c++)
+    E = _(t, 4 + c * 2, 6 + c * 2), I[c * 3] = O(~~(E / 361) - 9) * d, I[c * 3 + 1] = O(~~(E / 19) % 19 - 9) * d, I[c * 3 + 2] = O(E % 19 - 9) * d;
+  const D = new Float64Array(s * e), P = new Float64Array(r * n);
+  for (a = 0; a < s; a++)
+    for (l = 0; l < e; l++)
+      D[a * e + l] = Q(C * l * a / e);
+  for (c = 0; c < r; c++)
+    for (p = 0; p < n; p++)
+      P[c * n + p] = Q(C * p * c / n);
+  const U = n * 4, A = new Uint8ClampedArray(U * e);
+  for (l = 0; l < e; l++)
+    for (p = 0; p < n; p++) {
+      for (m = h = f = 0, a = 0; a < s; a++)
+        for (b = D[a * e + l], c = 0; c < r; c++)
+          y = P[c * n + p] * b, g = (c + a * r) * 3, m += I[g] * y, h += I[g + 1] * y, f += I[g + 2] * y;
+      w = 4 * p + l * U, A[w] = W(m), A[w + 1] = W(h), A[w + 2] = W(f), A[w + 3] = 255;
     }
-  return R;
+  return A;
 }
-const V = (t) => {
+const L = (t) => {
   try {
     return new URL(t);
   } catch {
     return null;
   }
-}, le = (t, e) => `rgba(${t.r},${t.g},${t.b},${e})`, F = (t) => te || ee ? {
+}, un = (t, n) => `rgba(${t.r},${t.g},${t.b},${n})`, F = (t) => nn || en ? {
   "data-testid": t
-} : {}, ue = (t, e) => e ? {
+} : {}, fn = (t, n) => n ? {
   "data-fileid": t
-} : {}, tt = (t, e) => Math.min(t, e), de = (t) => {
-  let e = t.replace(/^#/, "");
-  if (e.length !== 3 && e.length !== 6)
+} : {}, tt = (t, n) => Math.min(t, n), dn = (t) => {
+  let n = t.replace(/^#/, "");
+  if (n.length !== 3 && n.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 };
-}, 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) => {
+  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 };
+}, x = (t, n = 0) => {
+  const e = Math.pow(10, n);
+  return Math.round(t * e) / e;
+}, pn = (t, n) => {
+  const e = L(t), o = L(n);
+  return !e || !o ? t : (o.pathname = e.pathname, o.search = e.search, o.toString());
+}, hn = (t, n = {}, e = ct, o = it) => {
   if (!t)
     return null;
   try {
-    e.debug && S("input imageSrc:", t);
-    const c = Zt(t);
-    if (e.debug && S("Visionary URL data: ", c), !c)
+    n.debug && R("input imageSrc:", t);
+    const i = qt(t);
+    if (n.debug && R("Visionary URL data: ", i), !i)
       throw new Error("Could not parse Visionary URL");
-    const { fields: r, options: s } = c;
+    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, 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 = tt(d, r.sourceWidth);
-      const g = A(f / a);
-      m = A(f / g, 6);
+    const u = r.sourceWidth / r.sourceHeight, c = (n == null ? void 0 : n.size) ?? s.size ?? tn, a = Z[c];
+    let p = 0, l = 0, m = 0;
+    if (u >= 1) {
+      l = p = tt(a, r.sourceWidth);
+      const g = x(l / u);
+      m = x(l / g, 6);
     } else
-      h = tt(d, r.sourceHeight), f = A(h * a), m = A(f / h, 6);
-    const p = A(100 / m, 6), l = {
+      p = tt(a, r.sourceHeight), l = x(p * u), m = x(l / p, 6);
+    const h = x(100 / m, 6), f = {
       ...r,
-      arPaddingTop: `${p}%`,
+      arPaddingTop: `${h}%`,
       aspectRatio: m,
-      maxWidth: f,
+      maxWidth: l,
       src: t
-    }, v = V(r.url);
-    if (v)
-      l.src = v.toString();
-    else if (!V(t) && j(r.url)) {
-      const g = Jt(r, {
-        endpoint: e.endpoint,
-        size: i
+    }, y = L(r.url);
+    if (y)
+      f.src = y.toString();
+    else if (!L(t) && j(r.url)) {
+      const g = Kt(r, {
+        endpoint: n.endpoint,
+        size: c
       });
-      g && (l.src = g);
+      g && (f.src = g);
     }
-    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);
+    n.endpoint && (f.src = pn(f.src, n.endpoint));
+    const b = r.bcc ? dn(r.bcc) : null;
+    if (b && (f.backgroundColor = un(b, e)), !lt && r.blurhash && !n.disableBlurLayer) {
+      const g = performance.now(), w = ln(r.blurhash, S, S, o), E = performance.now() - g;
+      n.debug && R(`Blurhash decode time: ${x(E, 1)} ms`), w && (f.pixels = w);
     }
-    return e.debug && S("Visionary Image state: ", l), l;
+    return n.debug && R("Visionary Image state: ", f), f;
   } catch {
     return null;
   }
-}, pt = {
+}, ht = {
   bottom: 0,
   left: 0,
   position: "absolute",
   right: 0,
   top: 0
-}, he = {
-  ...pt,
+}, mn = {
+  ...ht,
   maxHeight: "100%",
   maxWidth: "100%"
-}, me = {
-  ...pt,
+}, gn = {
+  ...ht,
   height: "100%",
   width: "100%"
-}, ge = (t) => {
-  const e = {
-    ...he
+}, bn = (t) => {
+  const n = {
+    ...mn
   };
-  return t && (e.display = "none"), e;
+  return t && (n.display = "none"), n;
 }, H = {
   CANVAS: "canvas",
   CONTAINER: "container",
   IMAGE: "image"
-}, be = "v7y_7587", ve = "v7y_b8c0", ye = "v7y_e0dd", X = {
-  container: be,
-  preventDrag: ve,
-  preventSelection: ye
-}, Re = ({
+}, yn = "v7y_7587", vn = "v7y_b8c0", wn = "v7y_e0dd", X = {
+  container: yn,
+  preventDrag: vn,
+  preventSelection: wn
+}, Rn = ({
   alt: t,
-  bgColorAlpha: e = ct,
-  className: n,
+  bgColorAlpha: n = ct,
+  className: e,
   debug: o = !1,
-  disableBlurLayer: c = !1,
+  disableBlurLayer: i = !1,
   disableImageLayer: r = !1,
   endpoint: s,
-  height: a,
-  hideImageLayer: i = !1,
-  lazy: d = !0,
-  onClick: h,
-  onError: f,
+  height: u,
+  hideImageLayer: c = !1,
+  lazy: a = !0,
+  onClick: p,
+  onError: l,
   onLoad: m,
-  preventDrag: p = !1,
-  preventSelection: l = !1,
-  punch: v = it,
+  preventDrag: h = !1,
+  preventSelection: f = !1,
+  punch: y = it,
   size: b,
   src: g,
   style: w,
-  width: x
+  width: E
 }) => {
-  const u = xt(() => pe(g, {
+  const d = At(() => hn(g, {
     debug: o,
-    disableBlurLayer: c,
+    disableBlurLayer: i,
     endpoint: s,
     size: b
-  }, e, v), [e, o, c, s, v, b, g]), E = Y(null), [O, I] = Nt();
-  ne(
+  }, n, y), [n, o, i, s, y, b, g]), I = Y(null), [k, D] = Nt();
+  rn(
     function() {
-      if (!E.current || !(u != null && u.blurhash))
+      if (!I.current || !(d != null && d.blurhash))
         return;
-      if (!u.pixels) {
+      if (!d.pixels) {
         console.warn("No pixel data passed in, skipping");
         return;
       }
-      const gt = performance.now(), B = E.current.getContext("2d");
+      const bt = performance.now(), B = I.current.getContext("2d");
       if (!B) {
         console.warn("Cannot access canvasRenderingContext, skipping");
         return;
       }
-      const M = B.createImageData(N, N);
+      const M = B.createImageData(S, S);
       if (!M) {
         console.warn("Could not create ImageData on CanvasRenderingContext");
         return;
       }
-      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`);
+      if (M.data.set(d.pixels), B.putImageData(M, 0, 0), o) {
+        const yt = performance.now() - bt;
+        R(`Canvas render time: ${x(yt, 1)} ms`);
       }
     },
-    [u == null ? void 0 : u.blurhash, u == null ? void 0 : u.pixels, o]
+    [d == null ? void 0 : d.blurhash, d == null ? void 0 : d.pixels, o]
   );
-  const k = q(
-    (T) => {
-      o && S("Image load error ", T), f && f();
+  const P = q(
+    (N) => {
+      o && R("Image load error ", N), l && l();
     },
-    [o, f]
+    [o, l]
   ), U = {
     alt: t,
-    loading: !d || I ? "eager" : "lazy",
+    loading: !a || D ? "eager" : "lazy",
     onLoad: m
   };
-  if (!u) {
-    o && S("Not a Visionary URL, rendering fallback <img />");
-    const T = {
+  if (!d) {
+    o && R("Not a Visionary URL, rendering fallback <img />");
+    const N = {
       ...U,
-      className: n,
-      height: a,
-      onClick: h,
-      onError: f,
+      className: e,
+      height: u,
+      onClick: p,
+      onError: l,
       src: g,
       style: w,
-      width: x
+      width: E
     };
-    return /* @__PURE__ */ G("img", { ...T });
+    return /* @__PURE__ */ G("img", { ...N });
   }
-  const R = At(X.container, n, {
-    [X.preventDrag]: !!p,
-    [X.preventSelection]: !!l
+  const A = St(X.container, e, {
+    [X.preventDrag]: !!h,
+    [X.preventSelection]: !!f
   }), z = {
     ...{
-      "--v-ar": u.arPaddingTop
+      "--v-ar": d.arPaddingTop
     },
-    aspectRatio: u.aspectRatio,
-    backgroundColor: (u == null ? void 0 : u.backgroundColor) ?? void 0,
-    maxWidth: u.maxWidth,
+    aspectRatio: d.aspectRatio,
+    backgroundColor: (d == null ? void 0 : d.backgroundColor) ?? void 0,
+    maxWidth: d.maxWidth,
     position: "relative",
     width: "100%",
     ...w
   };
-  x && (z.width = x), a && (z.height = a);
-  const ht = {
-    onClick: h
-  }, mt = ge(i);
+  E && (z.width = E), u && (z.height = u);
+  const mt = {
+    onClick: p
+  }, gt = bn(c);
   return /* @__PURE__ */ vt(
     "div",
     {
-      className: R,
-      ref: O,
+      className: A,
+      ref: k,
       style: z,
-      ...ue(u.url, o),
+      ...fn(d.url, o),
       ...F(H.CONTAINER),
-      ...ht,
+      ...mt,
       children: [
-        !c && /* @__PURE__ */ G(
+        !i && /* @__PURE__ */ G(
           "canvas",
           {
-            height: N,
-            ref: E,
-            style: me,
-            width: N,
+            height: S,
+            ref: I,
+            style: gn,
+            width: S,
             ...F(H.CANVAS)
           }
         ),
@@ -492,9 +504,9 @@ const V = (t) => {
           {
             ...U,
             ...F(H.IMAGE),
-            onError: k,
-            src: u.src,
-            style: mt
+            onError: P,
+            src: d.src,
+            style: gt
           }
         )
       ]
@@ -502,5 +514,5 @@ const V = (t) => {
   );
 };
 export {
-  Re as Image
+  Rn 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(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:{}};/*!
+(function(A,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):(A=typeof globalThis<"u"?globalThis:A||self,R(A.VisionaryImage={},A.jsxRuntime,A.React))})(this,function(A,R,x){"use strict";function me(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}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 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"})});
+*/(function(e){(function(){var t={}.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)t.call(r,u)&&r[u]&&(s=i(s,u));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 be=me(ge),ye=(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:u}={},c=[])=>{const[a,p]=x.useState({inView:u||!1,entry:null,observer:null}),l=x.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=ye(l,{root:e,rootMargin:t,threshold:n},[o,...c]);return x.useEffect(()=>{i!=null&&i.current&&m(i.current)},[i,m]),[m,a.inView,a.entry,a.observer]};var j=(e=>(e.AUTO="auto",e.AVIF="avif",e.JPEG="jpeg",e.WEBP="webp",e))(j||{}),v=(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))(v||{}),O=(e=>(e.DEBUG="debug",e.DOWNLOAD="download",e))(O||{});const we="https://link.visionary.cloud";j.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((e,t)=>{const n=t,o=M[n];return o&&(e[o]=n),e},{});const Q="!";var Ie=Object.defineProperty,xe=(e,t,n)=>t in e?Ie(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Ee=(e,t,n)=>xe(e,typeof t!="symbol"?t+"":t,n),G={},V={};Object.defineProperty(V,"__esModule",{value:!0});function Ae(e){return String.fromCharCode(parseInt(e.slice(1),16))}function Re(e){return btoa(encodeURIComponent(e).replace(/%[0-9A-F]{2}/g,Ae))}V.encode=Re;function Se(e){return`%${`00${e.charCodeAt(0).toString(16)}`.slice(-2)}`}function Te(e){return decodeURIComponent(Array.from(atob(e),Se).join(""))}V.decode=Te,Object.defineProperty(G,"__esModule",{value:!0});const ee=V;function Ue(e){return ee.decode(e.replace(/\-/g,"+").replace(/_/g,"/"))}var Ne=G.decode=Ue;function Oe(e){return ee.encode(e).replace(/\//g,"_").replace(/\+/g,"-").replace(/=+$/,"")}var Ce=G.encode=Oe;const De=e=>e.filter(Boolean),te=e=>{try{return new URL(e)}catch{return null}},L=(e="")=>/^[A-Za-z0-9_-]*$/.test(e),Pe=e=>{const{altText:t,bcc:n,blurhash:o,blurhashX:i,blurhashY:r,sourceHeight:s,sourceWidth:u,url:c}=e;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),t&&t.length&&a.push(t)),_e(a)},_e=e=>Ce(e.join(Q)),ne=e=>{if(typeof e!="string")return null;const t=e.trim();if(!t.length||!L(t))return null;const n=Ne(t);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 y=Number(a)??0,b=Number(p)??0;return y<1||b<1?(console.error("Cannot parse Visionary Code: invalid blurhash x, y component dimensions",y,b),null):{altText:l,bcc:u,blurhash:c,blurhashX:y,blurhashY:b,sourceHeight:f,sourceWidth:h,url:m}};class je extends Error{constructor(){super(...arguments),Ee(this,"message","invalid endpoint URL (does it contain http/https?)")}}const Ve=e=>e===O.DEBUG,Le=e=>e===O.DOWNLOAD,$e=e=>Object.values(j).includes(e),re=e=>Object.values(v).includes(e),ke=(e=[])=>{const t={};for(const n of e)re(n)?t.size=v[n]:Ve(n)?t.debug=!0:Le(n)?t.download=!0:$e(n)&&(t.format=n);return t},ze=e=>{if(!e||typeof e!="object")return null;const t=[];return e.debug&&t.push(O.DEBUG),e.download&&t.push(O.DOWNLOAD),e.format&&e.format!==j.AUTO&&t.push(e.format),e.size&&re(e.size)&&t.push(e.size),t.length?t.sort().join(","):null},Be=e=>{if(L(e)){const t=ne(e);if(t)return{fields:t,options:{}}}return Me(e)},Me=e=>{if(!e)return null;const t=e.trim();if(!t)return null;try{const n=We(t);if(!n)return null;const{code:o,optionTokens:i}=n,r=ne(o);if(!r)return null;const s=ke(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},Ge=(e,t)=>{const n=Pe(e);if(n instanceof Error)return null;let o=null;if(t!=null&&t.endpoint&&(o=te(t==null?void 0:t.endpoint),!o))throw new je("Cannot construct URL: bad endpoint. Ensure endpoint starts with http:// or https://");o||(o=te(we));const i=[o.origin,"image",n],r=t?ze(t):null;return r&&i.push(r),t!=null&&t.filename?i.push(t.filename):i.push("image.jpg"),i.join("/")},We=e=>{try{const t=new URL(e),n=De(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||!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},oe=.7,se=1,N=24,Fe=v.lg,ce=process.env.NODE_ENV,He=ce==="development",ie=typeof document>"u",Xe=ce==="test",Ye=ie?()=>{}:x.useLayoutEffect,qe="<visionary>",S=(e,...t)=>{!console||typeof console.log!="function"||console.log(`${qe} ${e}`,...t)},ae=new Uint8Array(128);for(let e=0;e<83;e++)ae["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(e)]=e;const $=(e,t,n)=>{let o=0;for(;t<n;)o*=83,o+=ae[e.charCodeAt(t++)];return o},le=Math.pow,C=Math.PI,Ze=C*2,ue=3294.6,fe=269.025,Je=e=>e>10.31475?le(e/fe+.052132,2.4):e/ue,W=e=>~~(e>1227e-8?fe*le(e,.416666)-13.025:e*ue+1),D=e=>(e<0?-1:1)*e*e,de=e=>{for(e+=C/2;e>C;)e-=Ze;const t=1.27323954*e-.405284735*D(e);return .225*(D(t)-t)+t};function Ke(e){const t=$(e,2,6);return[t>>16,t>>8&255,t&255]}function Qe(e,t,n,o){const i=$(e,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,y=0,b=0,g=0,w=0,E=0;const d=($(e,1,2)+1)/13446*(o|1),I=new Float64Array(u*3),Y=Ke(e);for(c=0;c<3;c++)I[c]=Je(Y[c]);for(c=1;c<u;c++)E=$(e,4+c*2,6+c*2),I[c*3]=D(~~(E/361)-9)*d,I[c*3+1]=D(~~(E/19)%19-9)*d,I[c*3+2]=D(E%19-9)*d;const z=new Float64Array(s*n),B=new Float64Array(r*t);for(a=0;a<s;a++)for(l=0;l<n;l++)z[a*n+l]=de(C*l*a/n);for(c=0;c<r;c++)for(p=0;p<t;p++)B[c*t+p]=de(C*p*c/t);const P=t*4,U=new Uint8ClampedArray(P*n);for(l=0;l<n;l++)for(p=0;p<t;p++){for(m=h=f=0,a=0;a<s;a++)for(b=z[a*n+l],c=0;c<r;c++)y=B[c*t+p]*b,g=(c+a*r)*3,m+=I[g]*y,h+=I[g+1]*y,f+=I[g+2]*y;w=4*p+l*P,U[w]=W(m),U[w+1]=W(h),U[w+2]=W(f),U[w+3]=255}return U}const k=e=>{try{return new URL(e)}catch{return null}},et=(e,t)=>`rgba(${e.r},${e.g},${e.b},${t})`,F=e=>He||Xe?{"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}},T=(e,t=0)=>{const n=Math.pow(10,t);return Math.round(e*n)/n},rt=(e,t)=>{const n=k(e),o=k(t);return!n||!o?e:(o.pathname=n.pathname,o.search=n.search,o.toString())},ot=(e,t={},n=oe,o=se)=>{if(!e)return null;try{t.debug&&S("input imageSrc:",e);const i=Be(e);if(t.debug&&S("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=(t==null?void 0:t.size)??s.size??Fe,a=M[c];let p=0,l=0,m=0;if(u>=1){l=p=pe(a,r.sourceWidth);const g=T(l/u);m=T(l/g,6)}else p=pe(a,r.sourceHeight),l=T(p*u),m=T(l/p,6);const h=T(100/m,6),f={...r,arPaddingTop:`${h}%`,aspectRatio:m,maxWidth:l,src:e},y=k(r.url);if(y)f.src=y.toString();else if(!k(e)&&L(r.url)){const g=Ge(r,{endpoint:t.endpoint,size:c});g&&(f.src=g)}t.endpoint&&(f.src=rt(f.src,t.endpoint));const b=r.bcc?nt(r.bcc):null;if(b&&(f.backgroundColor=et(b,n)),!ie&&r.blurhash&&!t.disableBlurLayer){const g=performance.now(),w=Qe(r.blurhash,N,N,o),E=performance.now()-g;t.debug&&S(`Blurhash decode time: ${T(E,1)} ms`),w&&(f.pixels=w)}return t.debug&&S("Visionary Image state: ",f),f}catch{return null}},he={bottom:0,left:0,position:"absolute",right:0,top:0},st={...he,maxHeight:"100%",maxWidth:"100%"},ct={...he,height:"100%",width:"100%"},it=e=>{const t={...st};return e&&(t.display="none"),t},H={CANVAS:"canvas",CONTAINER:"container",IMAGE:"image"},X={container:"v7y_7587",preventDrag:"v7y_b8c0",preventSelection:"v7y_e0dd"},at=({alt:e,bgColorAlpha:t=oe,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:y=se,size:b,src:g,style:w,width:E})=>{const d=x.useMemo(()=>ot(g,{debug:o,disableBlurLayer:i,endpoint:s,size:b},t,y),[t,o,i,s,y,b,g]),I=x.useRef(null),[Y,z]=ve();Ye(function(){if(!I.current||!(d!=null&&d.blurhash))return;if(!d.pixels){console.warn("No pixel data passed in, skipping");return}const ft=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 dt=performance.now()-ft;S(`Canvas render time: ${T(dt,1)} ms`)}},[d==null?void 0:d.blurhash,d==null?void 0:d.pixels,o]);const B=x.useCallback(_=>{o&&S("Image load error ",_),l&&l()},[o,l]),P={alt:e,loading:!a||z?"eager":"lazy",onLoad:m};if(!d){o&&S("Not a Visionary URL, rendering fallback <img />");const _={...P,className:n,height:u,onClick:p,onError:l,src:g,style:w,width:E};return R.jsx("img",{..._})}const U=be(X.container,n,{[X.preventDrag]:!!h,[X.preventSelection]:!!f}),q={...{"--v-ar":d.arPaddingTop},aspectRatio:d.aspectRatio,backgroundColor:(d==null?void 0:d.backgroundColor)??void 0,maxWidth:d.maxWidth,position:"relative",width:"100%",...w};E&&(q.width=E),u&&(q.height=u);const lt={onClick:p},ut=it(c);return R.jsxs("div",{className:U,ref:Y,style:q,...tt(d.url,o),...F(H.CONTAINER),...lt,children:[!i&&R.jsx("canvas",{height:N,ref:I,style:ct,width:N,...F(H.CANVAS)}),!r&&R.jsx("img",{...P,...F(H.IMAGE),onError:B,src:d.src,style:ut})]})};A.Image=at,Object.defineProperty(A,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.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/visionary-image.umd.js",
   "module": "./dist/visionary-image.es.js",
@@ -17,14 +17,14 @@
   "license": "ISC",
   "scripts": {
     "build": "tsc && npm run clean && vite build",
+    "build-storybook": "storybook build -o storybook-static",
     "clean": "rimraf dist/",
     "dev": "vite",
     "lint": "tsc --noEmit; eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build"
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "files": [
     "dist/",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "fast-blurhash": "1.1.2",
+    "fast-blurhash": "1.1.4",
     "react-hook-inview": "4.5.1",
     "visionary-url": "1.3.1"
   },