visionary-image 1.0.1 → 1.0.3

package/README.md

@@ -2,18 +2,25 @@
 
 React image component with built-in Blurhash placeholders for better UX and Core Web Vitals.
 
-![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/visionary-ux/visionary-image/.github%2Fworkflows%2Fci-cd-workflow.yml?branch=master&style=flat-square) ![npm package size (minzipped, via Bundlephobia)](https://img.shields.io/bundlephobia/minzip/visionary-image?style=flat-square&color=blue)
+![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/)
 
-**Features:**
+## Features
 
-- Blurhash data encoded in the image URL via [visionary-url](https://github.com/visionary-ux/visionary-url) for instant image placeholders
-- Renders a true-to-size, responsive Blurhash placeholder while the image loads, eliminating Cumulative Layout Shift (CLS)
-- Images below the fold are lazily loaded, reducing initial page load size and request count, optimizing Interaction to Next Paint (INP)
-- Framework-tested (Remix, Next.js, Vite) with support for both client and server-side rendering (SSR, SSG) environments
-- Additional features: Prevent dragging, user-selection of image
-- Improves Core Web Vitals scores which Google notes as an important ranking signal in Search.
+- **Easy Blurhash:** Get started with Blurhash in 60 seconds.
+- **Layout stability**: Eliminates Cumulative Layout Shift (CLS) with true-to-size, responsive placeholders.
+- **Automatic lazy loading**: Off-screen images are deferred, reducing initial pageload size and optimizing Interaction to Next Paint (INP).
+- **Lighning-fast previews**: Renders placeholders early (by initial DOM layout) using URL-embedded Blurhash data, powered by [`visionary-url`](https://github.com/visionary-ux/visionary-url).
+- **Framework tested**: Compatible with Remix, Next.js, and Vite and supports both client and server-side rendering (SSR, SSG).
+- **Additional features**: Prevent image dragging; prevent user selecting image
+- **Developer friendly**: Written in Typescript and [unit tested](./src/components/Image/__test__/).
+  - Check out the [interactive Storybook sandbox](https://visionary-ux.github.io/visionary-image/)
+- **Search performance**: Enhance search ranking potential by improving Core Web Vitals scores.
+  > "We highly recommend site owners achieve good Core Web Vitals for success with Search" — [Google Search Central](https://developers.google.com/search/docs/appearance/core-web-vitals)
 
-> "We highly recommend site owners achieve good Core Web Vitals for success with Search", [Google Search Central](https://developers.google.com/search/docs/appearance/core-web-vitals)
+### Lighthouse Performance
+
+Lighthouse report filmstrip showing three-layer image loading process
+![Lighthouse report loading stage filmstrip](https://github.com/user-attachments/assets/20fd15ad-6801-4105-b75d-bf12cc8c704e)
 
 ## Installation
 
@@ -25,7 +32,7 @@ npm install --save visionary-image
 
 ## Usage
 
-Create a Visionary image URL to get started.
+Begin by creating a Visionary image URL. This is then passed to the `src` prop of the Image component.
 
 ### Creating a Visionary Image URL
 
@@ -40,14 +47,7 @@ There are several ways to create a Visionary URL.
 ```tsx
 import { Image } from "visionary-image";
 
-const imageUrl = "<visionary url or code>";
-const altText = "Nighttime stroll in Tokyo, neon-lit with a purple glow";
-
-const App = () => {
-  <div>
-    <Image alt={altText} src={imageUrl} />
-  </div>;
-};
+const ImageDetails = () => <Image alt="..." src="<Visionary URL>" />;
 ```
 
 ## Component Props
@@ -60,8 +60,9 @@ const App = () => {
 | `debug` <br/> boolean             | Prints handy debug info to the console (Visionary URL data, render times).                                                                                                               |
 | `disableBlurLayer` <br/> boolean  | Disables rendering of the blur (canvas) layer.                                                                                                                                           |
 | `disableImageLayer` <br/> boolean | Disables rendering of the image layer.                                                                                                                                                   |
+| `height` <br/>number, string      | If set, will override internally computed image height. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                     |
 | `hideImageLayer` <br/> boolean    | Hides the image layer, revealing the blur layer underneath.                                                                                                                              |
-| `lazy` <br/> boolean              | Should image lazily load. <br/> Default: `true`                                                                                                                                          |
+| `lazy` <br/> boolean              | Should image load lazily. <br/> Default: `true`                                                                                                                                          |
 | `onClick` <br/> function          | Callback function to invoke when the image is clicked. function.                                                                                                                         |
 | `onError` <br/> function          | Error callback function.                                                                                                                                                                 |
 | `onLoad` <br/> function           | Image loaded callback function.                                                                                                                                                          |
@@ -69,9 +70,18 @@ const App = () => {
 | `preventSelection` <br/>boolean   | Prevents user from highlighting the image element.                                                                                                                                       |
 | `punch` <br/>number               | Blurhash punch parameter.<br /> Default: `1`                                                                                                                                             |
 | `src` <br/>string                 | Visionary URL, Visionary Code, or ordinary image URL.<br/> If `src` contains Visionary data, placeholders will be rendered, otherwise falls back to an `img` element. <br/> **required** |
+| `width` <br/>number, string       | If set, will override internally computed image width. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data.                      |
+
+## Relevant Questions
+
+### Do image placeholders render server-side?
+
+Yes, Visionary Image supports server-side rendering (SSR) and static site generation (SSG), as well as client-side rendering. In server-rendered scenarios, the first layer (background color) renders immediately, followed by the Blurhash and image layers once the page loads in the client's browser.
+
+### How long does the Blurhash canvas take to load?
+
+Canvas operations are highly efficient in modern browsers. Rendering the 24x24 pixel Blurhash placeholder typically takes around 1ms.
 
-### More Props
+### What is Blurhash and where can I learn more?
 
-|                   |                                                                                                                                                                          |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `height`, `width` | If set, will override internally computed image dimensions. By default, Visionary renders optimally sized images, using the aspect-ratio and max-width placeholder data. |
+Blurhash uses Discrete Cosine Transforms to represent a color-accurate image placeholder as a compact string (in 20-30 characters). Check out the official [Blurhash docs](https://github.com/woltapp/blurhash) for more info.

package/dist/visionary-image.es.js

@@ -1,7 +1,7 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="v7y-styles",e.appendChild(document.createTextNode('.v7y_7587:before{content:"";display:block;padding-top:var(--v-ar)}.v7y_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 { 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";
+function xt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 var et = { exports: {} };
@@ -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,214 @@ 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 = []) => {
+var Ut = et.exports;
+const Nt = /* @__PURE__ */ xt(Ut), Ot = (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]);
+}, Tt = ({ root: t, rootMargin: n, threshold: e, unobserveOnEnter: o, target: i, onEnter: r, onLeave: s, defaultInView: u } = {}, c = []) => {
+  const [a, p] = It({
+    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], d) => {
+    const b = d.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];
-};
-var $ = /* @__PURE__ */ ((t) => (t.AUTO = "auto", t.AVIF = "avif", t.JPEG = "jpeg", t.WEBP = "webp", t))($ || {}), y = /* @__PURE__ */ ((t) => (t.xs = "xs", t.sm = "sm", t.md = "md", t.lg = "lg", t.xl = "xl", t.xxl = "xxl", t["4k"] = "4k", t["5k"] = "5k", t.full = "full", t))(y || {}), P = /* @__PURE__ */ ((t) => (t.DEBUG = "debug", t.DOWNLOAD = "download", t))(P || {});
-const Ot = "https://link.visionary.cloud";
-$.AUTO, y.lg;
+      entry: h,
+      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;
 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
+  [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(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 });
-function Pt(t) {
+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) {
   return String.fromCharCode(parseInt(t.slice(1), 16));
 }
-function _t(t) {
-  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Pt));
+function $t(t) {
+  return btoa(encodeURIComponent(t).replace(/%[0-9A-F]{2}/g, Vt));
 }
-L.encode = _t;
-function Ct(t) {
+j.encode = $t;
+function jt(t) {
   return `%${`00${t.charCodeAt(0).toString(16)}`.slice(-2)}`;
 }
-function Vt(t) {
-  return decodeURIComponent(Array.from(atob(t), Ct).join(""));
+function kt(t) {
+  return decodeURIComponent(Array.from(atob(t), jt).join(""));
 }
-L.decode = Vt;
+j.decode = kt;
 Object.defineProperty(J, "__esModule", { value: !0 });
-const rt = L;
-function $t(t) {
-  return rt.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
+const ot = j;
+function zt(t) {
+  return ot.decode(t.replace(/\-/g, "+").replace(/_/g, "/"));
 }
-var Lt = J.decode = $t;
-function jt(t) {
-  return rt.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
+var Bt = J.decode = zt;
+function Mt(t) {
+  return ot.encode(t).replace(/\//g, "_").replace(/\+/g, "-").replace(/=+$/, "");
 }
-var kt = J.encode = jt;
-const zt = (t) => t.filter(Boolean), K = (t) => {
+var Wt = J.encode = Mt;
+const Gt = (t) => t.filter(Boolean), Q = (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)
+}, k = (t = "") => /^[A-Za-z0-9_-]*$/.test(t), Ft = (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)), Ht(a);
+}, Ht = (t) => Wt(t.join(rt)), st = (t) => {
   if (typeof t != "string")
     return null;
-  const e = t.trim();
-  if (!e.length || !j(e))
+  const n = t.trim();
+  if (!n.length || !k(n))
     return null;
-  const n = Lt(e);
-  if (!n)
+  const e = Bt(n);
+  if (!e)
     return null;
-  const o = n.split(nt);
+  const o = e.split(rt);
   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()), d = Number(s.trim());
+  if (isNaN(h) || isNaN(d) || !h || !d)
     return console.error("Cannot parse Visionary Code: invalid image dimensions", r, s), null;
-  const v = Number(d) ?? 0, b = Number(h) ?? 0;
+  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: f,
-    bcc: a,
-    blurhash: i,
+    altText: l,
+    bcc: u,
+    blurhash: c,
     blurhashX: v,
     blurhashY: b,
-    sourceHeight: l,
-    sourceWidth: p,
+    sourceHeight: d,
+    sourceWidth: h,
     url: m
   };
 };
-class Gt extends Error {
+class Xt extends Error {
   constructor() {
-    super(...arguments), Dt(this, "message", "invalid endpoint URL (does it contain http/https?)");
+    super(...arguments), Lt(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 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 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);
+  return n;
+}, Kt = (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) => {
-  if (j(t)) {
-    const e = ot(t);
-    if (e)
+  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)) {
+    const n = st(t);
+    if (n)
       return {
-        fields: e,
+        fields: n,
         options: {}
       };
   }
-  return qt(t);
-}, qt = (t) => {
+  return tn(t);
+}, tn = (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 = en(n);
+    if (!e)
       return null;
-    const { code: o, optionTokens: c } = n, r = ot(o);
+    const { code: o, optionTokens: i } = e, r = st(o);
     if (!r)
       return null;
-    const s = Xt(c);
+    const s = Jt(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)
+}, nn = (t, n) => {
+  const e = Ft(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 = Q(n == null ? void 0 : n.endpoint), !o))
+    throw new Xt(
       "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) => {
+  o || (o = Q(Pt));
+  const i = [o.origin, "image", e], r = n ? Kt(n) : null;
+  return r && i.push(r), n != null && n.filename ? i.push(n.filename) : i.push("image.jpg"), i.join("/");
+}, en = (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 = Gt(n.pathname.split("/"));
+    if (e[0] !== "image" || ![3, 4].includes(e.length))
       throw new Error("Unrecognized URL");
-    const o = n[1].trim();
-    if (!o.length || !j(o))
+    const o = e[1].trim();
+    if (!o.length || !k(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,39 +242,51 @@ 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) => {
+}, 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);
+}, dt = new Uint8Array(128);
+for (let t = 0; t < 83; t++)
+  dt["0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".charCodeAt(
+    t
+  )] = t;
+const L = (t, n, e) => {
   let o = 0;
-  for (; e < n; )
-    o *= 83, o += oe.indexOf(t[e++]);
+  for (; n < e; )
+    o *= 83, o += dt[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, 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;
+  const n = 1.27323954 * t - 0.405284735 * C(t);
+  return 0.225 * (C(n) - n) + n;
 };
-function ie(t) {
-  const e = C(t, 2, 6);
-  return [e >> 16, e >> 8 & 255, e & 255];
+function dn(t) {
+  const n = L(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 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);
+  for (c = 0; c < 3; c++)
+    I[c] = un(z[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);
+  for (a = 0; a < s; a++)
+    for (l = 0; l < e; l++)
+      S[a * e + l] = tt(P * 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);
+  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;
     }
   return R;
 }
@@ -282,225 +296,225 @@ const V = (t) => {
   } catch {
     return null;
   }
-}, le = (t, e) => `rgba(${t.r},${t.g},${t.b},${e})`, F = (t) => te || ee ? {
+}, pn = (t, n) => `rgba(${t.r},${t.g},${t.b},${n})`, F = (t) => on || sn ? {
   "data-testid": t
-} : {}, ue = (t, e) => e ? {
+} : {}, hn = (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)
+} : {}, nt = (t, n) => Math.min(t, n), mn = (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 };
+}, 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) => {
   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 && x("input imageSrc:", t);
+    const i = Qt(t);
+    if (n.debug && x("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 ?? rn, a = Z[c];
+    let p = 0, l = 0, m = 0;
+    if (u >= 1) {
+      l = p = nt(a, r.sourceWidth);
+      const g = A(l / u);
+      m = A(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 = nt(a, r.sourceHeight), l = A(p * u), m = A(l / p, 6);
+    const h = A(100 / m, 6), d = {
       ...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
+      d.src = v.toString();
+    else if (!V(t) && k(r.url)) {
+      const g = nn(r, {
+        endpoint: n.endpoint,
+        size: c
       });
-      g && (l.src = g);
+      g && (d.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 && (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);
     }
-    return e.debug && S("Visionary Image state: ", l), l;
+    return n.debug && x("Visionary Image state: ", d), d;
   } catch {
     return null;
   }
-}, pt = {
+}, mt = {
   bottom: 0,
   left: 0,
   position: "absolute",
   right: 0,
   top: 0
-}, he = {
-  ...pt,
+}, vn = {
+  ...mt,
   maxHeight: "100%",
   maxWidth: "100%"
-}, me = {
-  ...pt,
+}, yn = {
+  ...mt,
   height: "100%",
   width: "100%"
-}, ge = (t) => {
-  const e = {
-    ...he
+}, wn = (t) => {
+  const n = {
+    ...vn
   };
-  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 = ({
+}, In = "v7y_7587", En = "v7y_b8c0", Rn = "v7y_e0dd", X = {
+  container: In,
+  preventDrag: En,
+  preventSelection: Rn
+}, On = ({
   alt: t,
-  bgColorAlpha: e = ct,
-  className: n,
+  bgColorAlpha: n = it,
+  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: d = !1,
+  punch: v = at,
   size: b,
   src: g,
-  style: w,
-  width: x
+  style: y,
+  width: E
 }) => {
-  const u = xt(() => pe(g, {
+  const f = At(() => bn(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, v), [n, o, i, s, v, b, g]), I = Y(null), [z, S] = Tt();
+  cn(
     function() {
-      if (!E.current || !(u != null && u.blurhash))
+      if (!I.current || !(f != null && f.blurhash))
         return;
-      if (!u.pixels) {
+      if (!f.pixels) {
         console.warn("No pixel data passed in, skipping");
         return;
       }
-      const gt = performance.now(), B = E.current.getContext("2d");
-      if (!B) {
+      const vt = performance.now(), M = I.current.getContext("2d");
+      if (!M) {
         console.warn("Cannot access canvasRenderingContext, skipping");
         return;
       }
-      const M = B.createImageData(N, N);
-      if (!M) {
+      const W = M.createImageData(U, U);
+      if (!W) {
         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 (W.data.set(f.pixels), M.putImageData(W, 0, 0), o) {
+        const yt = performance.now() - vt;
+        x(`Canvas render time: ${A(yt, 1)} ms`);
       }
     },
-    [u == null ? void 0 : u.blurhash, u == null ? void 0 : u.pixels, o]
+    [f == null ? void 0 : f.blurhash, f == null ? void 0 : f.pixels, o]
   );
-  const k = q(
-    (T) => {
-      o && S("Image load error ", T), f && f();
+  const _ = q(
+    (O) => {
+      o && x("Image load error ", O), l && l();
     },
-    [o, f]
-  ), U = {
+    [o, l]
+  ), N = {
     alt: t,
-    loading: !d || I ? "eager" : "lazy",
+    loading: !a || S ? "eager" : "lazy",
     onLoad: m
   };
-  if (!u) {
-    o && S("Not a Visionary URL, rendering fallback <img />");
-    const T = {
-      ...U,
-      className: n,
-      height: a,
-      onClick: h,
-      onError: f,
+  if (!f) {
+    o && x("Not a Visionary URL, rendering fallback <img />");
+    const O = {
+      ...N,
+      className: e,
+      height: u,
+      onClick: p,
+      onError: l,
       src: g,
-      style: w,
-      width: x
+      style: y,
+      width: E
     };
-    return /* @__PURE__ */ G("img", { ...T });
+    return /* @__PURE__ */ T("img", { ...O });
   }
-  const R = At(X.container, n, {
-    [X.preventDrag]: !!p,
-    [X.preventSelection]: !!l
-  }), z = {
+  const R = Nt(X.container, e, {
+    [X.preventDrag]: !!h,
+    [X.preventSelection]: !!d
+  }), B = {
     ...{
-      "--v-ar": u.arPaddingTop
+      "--v-ar": f.arPaddingTop
     },
-    aspectRatio: u.aspectRatio,
-    backgroundColor: (u == null ? void 0 : u.backgroundColor) ?? void 0,
-    maxWidth: u.maxWidth,
+    ...y,
+    aspectRatio: f.aspectRatio,
+    backgroundColor: (f == null ? void 0 : f.backgroundColor) ?? void 0,
+    maxWidth: f.maxWidth,
     position: "relative",
-    width: "100%",
-    ...w
+    width: "100%"
   };
-  x && (z.width = x), a && (z.height = a);
-  const ht = {
-    onClick: h
-  }, mt = ge(i);
-  return /* @__PURE__ */ vt(
+  E && (B.width = E), u && (B.height = u);
+  const gt = {
+    onClick: p
+  }, bt = wn(c), K = /* @__PURE__ */ wt(
     "div",
     {
       className: R,
-      ref: O,
-      style: z,
-      ...ue(u.url, o),
+      ref: z,
+      style: B,
+      ...hn(f.url, o),
       ...F(H.CONTAINER),
-      ...ht,
+      ...gt,
       children: [
-        !c && /* @__PURE__ */ G(
+        !i && /* @__PURE__ */ T(
           "canvas",
           {
-            height: N,
-            ref: E,
-            style: me,
-            width: N,
+            height: U,
+            ref: I,
+            style: yn,
+            width: U,
             ...F(H.CANVAS)
           }
         ),
         !r && // eslint-disable-next-line jsx-a11y/alt-text -- `sharedImgProps` includes alt tag
-        /* @__PURE__ */ G(
+        /* @__PURE__ */ T(
           "img",
           {
-            ...U,
+            ...N,
             ...F(H.IMAGE),
-            onError: k,
-            src: u.src,
-            style: mt
+            onError: _,
+            src: f.src,
+            style: bt
           }
         )
       ]
     }
   );
+  return y != null && y.aspectRatio ? /* @__PURE__ */ T(Dt, { aspectRatio: y.aspectRatio, children: K }) : K;
 };
 export {
-  Re as Image
+  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(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(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:{}};/*!
 	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(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"})});

package/package.json

@@ -1,7 +1,8 @@
 {
   "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.3",
+  "homepage": "https://visionary.cloud",
   "type": "module",
   "main": "./dist/visionary-image.umd.js",
   "module": "./dist/visionary-image.es.js",
@@ -17,14 +18,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 +38,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"
   },