heroshot 0.14.1 → 0.14.2

package/dist/integrations/next/index.js

@@ -1,76 +1,76 @@
 "use client";
 import y from "@heroshot/manifest";
-import { jsx as h, jsxs as I } from "react/jsx-runtime";
-import $, { createContext as j, useContext as C, useMemo as g, useState as L, useEffect as z } from "react";
-let x = null;
+import { jsx as h, jsxs as $ } from "react/jsx-runtime";
+import I, { createContext as j, useContext as C, useMemo as g, useState as L, useEffect as z } from "react";
+let S = null;
 function N(e) {
-  x = e;
+  S = e;
 }
 function O() {
-  return x;
+  return S;
 }
-function R(e, t) {
-  return e.screenshots[t];
+function R(e, n) {
+  return e.screenshots[n];
 }
-function V(e, t = {}) {
-  const { slug: a, format: s } = e, { viewport: r, colorScheme: c } = t, n = [a];
-  r && n.push(r), c && n.push(c);
-  const i = s === "jpeg" ? "jpg" : "png";
-  return `${n.join("-")}.${i}`;
+function V(e, n = {}) {
+  const { slug: c, format: s } = e, { viewport: t, colorScheme: i } = n, r = [c];
+  t && r.push(t), i && r.push(i);
+  const a = s === "jpeg" ? "jpg" : "png";
+  return `${r.join("-")}.${a}`;
 }
-function A(e, t, a = {}) {
-  const s = V(t, a);
-  return `${e.outputDirectory}/${s}`;
+function W(e, n, c = {}) {
+  const s = V(n, c), t = e.outputDirectory;
+  return `${t.startsWith("/") ? "" : "/"}${t}/${s}`;
 }
-function H(e, t, a) {
-  const { colorSchemes: s } = t, r = s.length > 0, c = (i) => A(e, t, { viewport: a, colorScheme: i }), n = {
-    default: r ? c("light") : c()
+function x(e, n, c) {
+  const { colorSchemes: s } = n, t = s.length > 0, i = (a) => W(e, n, { viewport: c, colorScheme: a }), r = {
+    default: t ? i("light") : i()
   };
-  return s.includes("light") && (n.light = c("light")), s.includes("dark") && (n.dark = c("dark")), n;
+  return s.includes("light") && (r.light = i("light")), s.includes("dark") && (r.dark = i("dark")), r;
 }
-function F(e, t) {
-  const a = H(e, t), s = {};
-  for (const r of t.viewports)
-    s[r] = H(e, t, r);
+function A(e, n) {
+  const c = x(e, n), s = {};
+  for (const t of n.viewports)
+    s[t] = x(e, n, t);
   return {
-    ...a,
+    ...c,
     viewports: s
   };
 }
 const D = j(null);
 function G({
   manifest: e,
-  children: t
+  children: n
 }) {
-  return /* @__PURE__ */ h(D.Provider, { value: e, children: t });
+  return /* @__PURE__ */ h(D.Provider, { value: e, children: n });
 }
-function S() {
+function H() {
   if (globalThis.window === void 0) return { isDark: !1, hasThemeHandling: !1 };
   const { theme: e } = document.documentElement.dataset;
   return e ? { isDark: e === "dark", hasThemeHandling: !0 } : document.documentElement.classList.contains("dark") ? { isDark: !0, hasThemeHandling: !0 } : document.documentElement.classList.length > 0 ? { isDark: !1, hasThemeHandling: !0 } : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? { isDark: !0, hasThemeHandling: !1 } : { isDark: !1, hasThemeHandling: !1 };
 }
-function W() {
-  const e = $.useRef(!1), [t, a] = L(() => S().isDark);
+function F() {
+  const e = I.useRef(!1), [n, c] = L(() => H().isDark);
   return z(() => {
-    const s = S();
+    const s = H();
     e.current = s.hasThemeHandling;
-    const r = () => {
+    const t = () => {
       const { theme: u } = document.documentElement.dataset;
       return u ? (e.current = !0, u === "dark") : document.documentElement.classList.contains("dark") ? (e.current = !0, !0) : e.current ? !1 : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ?? !1;
-    }, c = new MutationObserver(() => {
-      e.current = !0, a(r());
+    }, i = new MutationObserver(() => {
+      e.current = !0, c(t());
     });
-    c.observe(document.documentElement, {
+    i.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     });
-    const n = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), i = () => {
-      a(r());
+    const r = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), a = () => {
+      c(t());
     };
-    return n?.addEventListener("change", i), () => {
-      c.disconnect(), n?.removeEventListener("change", i);
+    return r?.addEventListener("change", a), () => {
+      i.disconnect(), r?.removeEventListener("change", a);
     };
-  }, []), t;
+  }, []), n;
 }
 const k = {
   mobile: 430,
@@ -80,16 +80,16 @@ const k = {
 };
 function J({
   name: e,
-  alt: t = "",
-  manifest: a,
+  alt: n = "",
+  manifest: c,
   className: s
 }) {
-  const r = W(), c = C(D), n = a ?? c ?? O(), i = g(() => n ? R(n, e) : null, [n, e]), u = g(() => !i || !n ? null : F(n, i), [n, i]), v = g(() => {
+  const t = F(), i = C(D), r = c ?? i ?? O(), a = g(() => r ? R(r, e) : null, [r, e]), u = g(() => !a || !r ? null : A(r, a), [r, a]), v = g(() => {
     if (!u) return "";
     const { light: o, dark: f } = u;
-    return r && f ? f : !r && o ? o : u.default;
-  }, [u, r]), T = g(() => {
-    if (!u || !i) return [];
+    return t && f ? f : !t && o ? o : u.default;
+  }, [u, t]), T = g(() => {
+    if (!u || !a) return [];
     const { viewports: o } = u, f = Object.keys(o);
     if (f.length === 0) return [];
     const b = [...f].sort((l, m) => {
@@ -102,31 +102,31 @@ function J({
       const p = d.light || d.default, E = d.dark || d.light || d.default, w = k[l] || Number.parseInt(l.split("x")[0] || "1280", 10), M = m === b.length - 1;
       return {
         viewport: l,
-        srcset: r ? E : p,
+        srcset: t ? E : p,
         width: w,
         media: M ? void 0 : `(max-width: ${w}px)`
       };
     }).filter((l) => l !== null);
-  }, [u, i, r]), P = T.length > 0;
-  if (!n) {
+  }, [u, a, t]), P = T.length > 0;
+  if (!r) {
     const o = "Heroshot: No manifest found. Add heroshot() plugin to vite config, use HeroshotProvider, or pass manifest prop.";
     return typeof console < "u" && console.warn(o), /* @__PURE__ */ h("span", { style: { color: "red", fontSize: "12px" }, children: o });
   }
-  if (!i) {
+  if (!a) {
     const o = `Heroshot: Screenshot "${e}" not found in config`;
     return typeof console < "u" && console.warn(o), /* @__PURE__ */ h("span", { style: { color: "red", fontSize: "12px" }, children: o });
   }
-  return P ? /* @__PURE__ */ I("picture", { className: s, children: [
+  return P ? /* @__PURE__ */ $("picture", { className: s, children: [
     T.map((o) => /* @__PURE__ */ h(
       "source",
       {
         srcSet: o.srcset,
         media: o.media
       },
-      `${o.viewport}-${r}`
+      `${o.viewport}-${t}`
     )),
-    /* @__PURE__ */ h("img", { src: v, alt: t, loading: "lazy" })
-  ] }) : /* @__PURE__ */ h("img", { src: v, alt: t, className: s, loading: "lazy" });
+    /* @__PURE__ */ h("img", { src: v, alt: n, loading: "lazy" })
+  ] }) : /* @__PURE__ */ h("img", { src: v, alt: n, className: s, loading: "lazy" });
 }
 (function() {
   N(y);

package/dist/integrations/react/index.js

@@ -1,74 +1,74 @@
 import { jsx as h, jsxs as y } from "react/jsx-runtime";
-import I, { createContext as $, useContext as j, useMemo as g, useState as C, useEffect as L } from "react";
-function z(e, t) {
-  return e.screenshots[t];
+import $, { createContext as I, useContext as j, useMemo as g, useState as C, useEffect as L } from "react";
+function z(e, n) {
+  return e.screenshots[n];
 }
-function N(e, t = {}) {
-  const { slug: a, format: s } = e, { viewport: r, colorScheme: c } = t, n = [a];
-  r && n.push(r), c && n.push(c);
-  const i = s === "jpeg" ? "jpg" : "png";
-  return `${n.join("-")}.${i}`;
+function N(e, n = {}) {
+  const { slug: c, format: s } = e, { viewport: t, colorScheme: i } = n, r = [c];
+  t && r.push(t), i && r.push(i);
+  const a = s === "jpeg" ? "jpg" : "png";
+  return `${r.join("-")}.${a}`;
 }
-function O(e, t, a = {}) {
-  const s = N(t, a);
-  return `${e.outputDirectory}/${s}`;
+function O(e, n, c = {}) {
+  const s = N(n, c), t = e.outputDirectory;
+  return `${t.startsWith("/") ? "" : "/"}${t}/${s}`;
 }
-function H(e, t, a) {
-  const { colorSchemes: s } = t, r = s.length > 0, c = (i) => O(e, t, { viewport: a, colorScheme: i }), n = {
-    default: r ? c("light") : c()
+function x(e, n, c) {
+  const { colorSchemes: s } = n, t = s.length > 0, i = (a) => O(e, n, { viewport: c, colorScheme: a }), r = {
+    default: t ? i("light") : i()
   };
-  return s.includes("light") && (n.light = c("light")), s.includes("dark") && (n.dark = c("dark")), n;
+  return s.includes("light") && (r.light = i("light")), s.includes("dark") && (r.dark = i("dark")), r;
 }
-function R(e, t) {
-  const a = H(e, t), s = {};
-  for (const r of t.viewports)
-    s[r] = H(e, t, r);
+function R(e, n) {
+  const c = x(e, n), s = {};
+  for (const t of n.viewports)
+    s[t] = x(e, n, t);
   return {
-    ...a,
+    ...c,
     viewports: s
   };
 }
-let x = null;
+let S = null;
 function Q(e) {
-  x = e;
+  S = e;
 }
 function V() {
-  return x;
+  return S;
 }
-const D = $(null);
+const D = I(null);
 function _({
   manifest: e,
-  children: t
+  children: n
 }) {
-  return /* @__PURE__ */ h(D.Provider, { value: e, children: t });
+  return /* @__PURE__ */ h(D.Provider, { value: e, children: n });
 }
-function S() {
+function H() {
   if (globalThis.window === void 0) return { isDark: !1, hasThemeHandling: !1 };
   const { theme: e } = document.documentElement.dataset;
   return e ? { isDark: e === "dark", hasThemeHandling: !0 } : document.documentElement.classList.contains("dark") ? { isDark: !0, hasThemeHandling: !0 } : document.documentElement.classList.length > 0 ? { isDark: !1, hasThemeHandling: !0 } : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? { isDark: !0, hasThemeHandling: !1 } : { isDark: !1, hasThemeHandling: !1 };
 }
-function A() {
-  const e = I.useRef(!1), [t, a] = C(() => S().isDark);
+function W() {
+  const e = $.useRef(!1), [n, c] = C(() => H().isDark);
   return L(() => {
-    const s = S();
+    const s = H();
     e.current = s.hasThemeHandling;
-    const r = () => {
+    const t = () => {
       const { theme: u } = document.documentElement.dataset;
       return u ? (e.current = !0, u === "dark") : document.documentElement.classList.contains("dark") ? (e.current = !0, !0) : e.current ? !1 : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ?? !1;
-    }, c = new MutationObserver(() => {
-      e.current = !0, a(r());
+    }, i = new MutationObserver(() => {
+      e.current = !0, c(t());
     });
-    c.observe(document.documentElement, {
+    i.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     });
-    const n = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), i = () => {
-      a(r());
+    const r = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), a = () => {
+      c(t());
     };
-    return n?.addEventListener("change", i), () => {
-      c.disconnect(), n?.removeEventListener("change", i);
+    return r?.addEventListener("change", a), () => {
+      i.disconnect(), r?.removeEventListener("change", a);
     };
-  }, []), t;
+  }, []), n;
 }
 const k = {
   mobile: 430,
@@ -78,16 +78,16 @@ const k = {
 };
 function q({
   name: e,
-  alt: t = "",
-  manifest: a,
+  alt: n = "",
+  manifest: c,
   className: s
 }) {
-  const r = A(), c = j(D), n = a ?? c ?? V(), i = g(() => n ? z(n, e) : null, [n, e]), u = g(() => !i || !n ? null : R(n, i), [n, i]), v = g(() => {
+  const t = W(), i = j(D), r = c ?? i ?? V(), a = g(() => r ? z(r, e) : null, [r, e]), u = g(() => !a || !r ? null : R(r, a), [r, a]), v = g(() => {
     if (!u) return "";
     const { light: o, dark: f } = u;
-    return r && f ? f : !r && o ? o : u.default;
-  }, [u, r]), T = g(() => {
-    if (!u || !i) return [];
+    return t && f ? f : !t && o ? o : u.default;
+  }, [u, t]), T = g(() => {
+    if (!u || !a) return [];
     const { viewports: o } = u, f = Object.keys(o);
     if (f.length === 0) return [];
     const b = [...f].sort((l, m) => {
@@ -100,17 +100,17 @@ function q({
       const p = d.light || d.default, E = d.dark || d.light || d.default, w = k[l] || Number.parseInt(l.split("x")[0] || "1280", 10), M = m === b.length - 1;
       return {
         viewport: l,
-        srcset: r ? E : p,
+        srcset: t ? E : p,
         width: w,
         media: M ? void 0 : `(max-width: ${w}px)`
       };
     }).filter((l) => l !== null);
-  }, [u, i, r]), P = T.length > 0;
-  if (!n) {
+  }, [u, a, t]), P = T.length > 0;
+  if (!r) {
     const o = "Heroshot: No manifest found. Add heroshot() plugin to vite config, use HeroshotProvider, or pass manifest prop.";
     return typeof console < "u" && console.warn(o), /* @__PURE__ */ h("span", { style: { color: "red", fontSize: "12px" }, children: o });
   }
-  if (!i) {
+  if (!a) {
     const o = `Heroshot: Screenshot "${e}" not found in config`;
     return typeof console < "u" && console.warn(o), /* @__PURE__ */ h("span", { style: { color: "red", fontSize: "12px" }, children: o });
   }
@@ -121,10 +121,10 @@ function q({
         srcSet: o.srcset,
         media: o.media
       },
-      `${o.viewport}-${r}`
+      `${o.viewport}-${t}`
     )),
-    /* @__PURE__ */ h("img", { src: v, alt: t, loading: "lazy" })
-  ] }) : /* @__PURE__ */ h("img", { src: v, alt: t, className: s, loading: "lazy" });
+    /* @__PURE__ */ h("img", { src: v, alt: n, loading: "lazy" })
+  ] }) : /* @__PURE__ */ h("img", { src: v, alt: n, className: s, loading: "lazy" });
 }
 export {
   q as Heroshot,

package/dist/integrations/svelte/shared.js

@@ -2,27 +2,27 @@ function h(t, n) {
   return t.screenshots[n];
 }
 function l(t, n = {}) {
-  const { slug: o, format: e } = t, { viewport: r, colorScheme: i } = n, s = [o];
-  r && s.push(r), i && s.push(i);
+  const { slug: i, format: e } = t, { viewport: o, colorScheme: r } = n, s = [i];
+  o && s.push(o), r && s.push(r);
   const c = e === "jpeg" ? "jpg" : "png";
   return `${s.join("-")}.${c}`;
 }
-function f(t, n, o = {}) {
-  const e = l(n, o);
-  return `${t.outputDirectory}/${e}`;
+function f(t, n, i = {}) {
+  const e = l(n, i), o = t.outputDirectory;
+  return `${o.startsWith("/") ? "" : "/"}${o}/${e}`;
 }
-function a(t, n, o) {
-  const { colorSchemes: e } = n, r = e.length > 0, i = (c) => f(t, n, { viewport: o, colorScheme: c }), s = {
-    default: r ? i("light") : i()
+function a(t, n, i) {
+  const { colorSchemes: e } = n, o = e.length > 0, r = (c) => f(t, n, { viewport: i, colorScheme: c }), s = {
+    default: o ? r("light") : r()
   };
-  return e.includes("light") && (s.light = i("light")), e.includes("dark") && (s.dark = i("dark")), s;
+  return e.includes("light") && (s.light = r("light")), e.includes("dark") && (s.dark = r("dark")), s;
 }
 function g(t, n) {
-  const o = a(t, n), e = {};
-  for (const r of n.viewports)
-    e[r] = a(t, n, r);
+  const i = a(t, n), e = {};
+  for (const o of n.viewports)
+    e[o] = a(t, n, o);
   return {
-    ...o,
+    ...i,
     viewports: e
   };
 }

package/dist/integrations/vue/index.js

@@ -1,40 +1,40 @@
-import { defineComponent as L, computed as m, ref as N, onMounted as T, onUnmounted as C, createElementBlock as h, openBlock as v, normalizeClass as _, createElementVNode as D, Fragment as I, renderList as j, toDisplayString as z } from "vue";
-let M = null;
+import { defineComponent as L, computed as h, ref as N, onMounted as T, onUnmounted as C, createElementBlock as m, openBlock as v, normalizeClass as x, createElementVNode as D, Fragment as I, renderList as j, toDisplayString as z } from "vue";
+let E = null;
 function G(n) {
-  M = n;
+  E = n;
 }
 function B() {
-  return M;
+  return E;
 }
 function V(n, e) {
   return n.screenshots[e];
 }
 function F(n, e = {}) {
-  const { slug: r, format: t } = n, { viewport: a, colorScheme: o } = e, s = [r];
-  a && s.push(a), o && s.push(o);
+  const { slug: o, format: t } = n, { viewport: s, colorScheme: a } = e, r = [o];
+  s && r.push(s), a && r.push(a);
   const l = t === "jpeg" ? "jpg" : "png";
-  return `${s.join("-")}.${l}`;
+  return `${r.join("-")}.${l}`;
 }
-function O(n, e, r = {}) {
-  const t = F(e, r);
-  return `${n.outputDirectory}/${t}`;
+function O(n, e, o = {}) {
+  const t = F(e, o), s = n.outputDirectory;
+  return `${s.startsWith("/") ? "" : "/"}${s}/${t}`;
 }
-function E(n, e, r) {
-  const { colorSchemes: t } = e, a = t.length > 0, o = (l) => O(n, e, { viewport: r, colorScheme: l }), s = {
-    default: a ? o("light") : o()
+function _(n, e, o) {
+  const { colorSchemes: t } = e, s = t.length > 0, a = (l) => O(n, e, { viewport: o, colorScheme: l }), r = {
+    default: s ? a("light") : a()
   };
-  return t.includes("light") && (s.light = o("light")), t.includes("dark") && (s.dark = o("dark")), s;
+  return t.includes("light") && (r.light = a("light")), t.includes("dark") && (r.dark = a("dark")), r;
 }
-function A(n, e) {
-  const r = E(n, e), t = {};
-  for (const a of e.viewports)
-    t[a] = E(n, e, a);
+function W(n, e) {
+  const o = _(n, e), t = {};
+  for (const s of e.viewports)
+    t[s] = _(n, e, s);
   return {
-    ...r,
+    ...o,
     viewports: t
   };
 }
-const W = ["srcset", "media"], Q = ["src", "alt"], R = ["src", "alt"], U = {
+const A = ["srcset", "media"], Q = ["src", "alt"], R = ["src", "alt"], U = {
   key: 2,
   style: { color: "red", "font-size": "12px" }
 }, J = /* @__PURE__ */ L({
@@ -46,78 +46,78 @@ const W = ["srcset", "media"], Q = ["src", "alt"], R = ["src", "alt"], U = {
     class: {}
   },
   setup(n) {
-    const e = n, r = m(() => e.manifest ?? B()), t = N(!1);
-    let a = !1;
-    function o() {
-      return globalThis.window === void 0 ? !1 : document.documentElement.classList.contains("dark") ? !0 : a ? !1 : !!globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches;
+    const e = n, o = h(() => e.manifest ?? B()), t = N(!1);
+    let s = !1;
+    function a() {
+      return globalThis.window === void 0 ? !1 : document.documentElement.classList.contains("dark") ? !0 : s ? !1 : !!globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches;
     }
     T(() => {
-      a = document.documentElement.classList.length > 0 || document.documentElement.dataset.theme !== void 0, t.value = o();
-      const u = new MutationObserver(() => {
-        a = !0, t.value = document.documentElement.classList.contains("dark");
+      s = document.documentElement.classList.length > 0 || document.documentElement.dataset.theme !== void 0, t.value = a();
+      const i = new MutationObserver(() => {
+        s = !0, t.value = document.documentElement.classList.contains("dark");
       });
-      u.observe(document.documentElement, {
+      i.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
       });
-      const c = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), i = () => {
-        t.value = o();
+      const c = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), u = () => {
+        t.value = a();
       };
-      c?.addEventListener("change", i), C(() => {
-        u.disconnect(), c?.removeEventListener("change", i);
+      c?.addEventListener("change", u), C(() => {
+        i.disconnect(), c?.removeEventListener("change", u);
       });
     });
-    const s = m(() => r.value ? V(r.value, e.name) : null), l = m(() => !s.value || !r.value ? null : A(r.value, s.value)), w = m(() => {
+    const r = h(() => o.value ? V(o.value, e.name) : null), l = h(() => !r.value || !o.value ? null : W(o.value, r.value)), w = h(() => {
       if (!l.value) return "";
-      const { light: u, dark: c } = l.value;
-      return t.value && c ? c : !t.value && u ? u : l.value.default;
+      const { light: i, dark: c } = l.value;
+      return t.value && c ? c : !t.value && i ? i : l.value.default;
     }), g = {
       mobile: 430,
       // iPhone 15/16 Pro Max viewport
       tablet: 768,
       desktop: 1280
-    }, y = m(() => {
-      if (!l.value || !s.value) return [];
-      const { viewports: u } = l.value, c = Object.keys(u);
+    }, y = h(() => {
+      if (!l.value || !r.value) return [];
+      const { viewports: i } = l.value, c = Object.keys(i);
       if (c.length === 0) return [];
-      const i = [...c].sort((f, p) => {
+      const u = [...c].sort((f, p) => {
         const d = g[f] || Number.parseInt(f.split("x")[0] || "1280", 10), b = g[p] || Number.parseInt(p.split("x")[0] || "1280", 10);
         return d - b;
       });
-      return i.map((f, p) => {
-        const d = u[f];
+      return u.map((f, p) => {
+        const d = i[f];
         if (!d) return null;
-        const b = d.light || d.default, P = d.dark || d.light || d.default, S = g[f] || Number.parseInt(f.split("x")[0] || "1280", 10), $ = p === i.length - 1, H = t.value ? P : b;
+        const b = d.light || d.default, $ = d.dark || d.light || d.default, S = g[f] || Number.parseInt(f.split("x")[0] || "1280", 10), P = p === u.length - 1, H = t.value ? $ : b;
         return {
           viewport: f,
           srcset: H,
           width: S,
           // Media query: max-width for this viewport (except for largest which is fallback)
-          media: $ ? void 0 : `(max-width: ${S}px)`
+          media: P ? void 0 : `(max-width: ${S}px)`
         };
       }).filter(Boolean);
-    }), x = m(() => y.value.length > 0), k = m(() => r.value ? s.value ? null : `Heroshot: Screenshot "${e.name}" not found in config` : "Heroshot: No manifest found. Add heroshot() plugin to vite config or pass manifest prop.");
-    return k.value && typeof console < "u" && console.warn(k.value), (u, c) => s.value && x.value ? (v(), h("picture", {
+    }), M = h(() => y.value.length > 0), k = h(() => o.value ? r.value ? null : `Heroshot: Screenshot "${e.name}" not found in config` : "Heroshot: No manifest found. Add heroshot() plugin to vite config or pass manifest prop.");
+    return k.value && typeof console < "u" && console.warn(k.value), (i, c) => r.value && M.value ? (v(), m("picture", {
       key: 0,
-      class: _(e.class)
+      class: x(e.class)
     }, [
-      (v(!0), h(I, null, j(y.value, (i) => (v(), h("source", {
-        key: `${i.viewport}-${t.value}`,
-        srcset: i.srcset,
-        media: i.media
-      }, null, 8, W))), 128)),
+      (v(!0), m(I, null, j(y.value, (u) => (v(), m("source", {
+        key: `${u.viewport}-${t.value}`,
+        srcset: u.srcset,
+        media: u.media
+      }, null, 8, A))), 128)),
       D("img", {
         src: w.value,
         alt: n.alt,
         loading: "lazy"
       }, null, 8, Q)
-    ], 2)) : s.value ? (v(), h("img", {
+    ], 2)) : r.value ? (v(), m("img", {
       key: 1,
       src: w.value,
       alt: n.alt,
-      class: _(e.class),
+      class: x(e.class),
       loading: "lazy"
-    }, null, 10, R)) : (v(), h("span", U, z(k.value), 1));
+    }, null, 10, R)) : (v(), m("span", U, z(k.value), 1));
   }
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroshot",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",