heroshot 0.14.0 → 0.14.2

package/dist/integrations/next/index.js

@@ -1,75 +1,76 @@
 "use client";
-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 y from "@heroshot/manifest";
+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) {
+  S = e;
 }
-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 O() {
+  return S;
 }
-function O(e, t, a = {}) {
-  const s = N(t, a);
-  return `${e.outputDirectory}/${s}`;
+function R(e, n) {
+  return e.screenshots[n];
 }
-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 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 W(e, n, c = {}) {
+  const s = V(n, c), t = e.outputDirectory;
+  return `${t.startsWith("/") ? "" : "/"}${t}/${s}`;
+}
+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 R(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
   };
 }
-let x = null;
-function Q(e) {
-  x = e;
-}
-function V() {
-  return x;
-}
-const D = $(null);
-function _({
+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 A() {
-  const e = I.useRef(!1), [t, a] = C(() => S().isDark);
-  return L(() => {
-    const s = S();
+function F() {
+  const e = I.useRef(!1), [n, c] = L(() => H().isDark);
+  return z(() => {
+    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,
@@ -77,18 +78,18 @@ const k = {
   tablet: 768,
   desktop: 1280
 };
-function q({
+function J({
   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 = 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) => {
@@ -101,34 +102,37 @@ 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 });
   }
-  return P ? /* @__PURE__ */ y("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);
+})();
 export {
-  q as Heroshot,
-  _ as HeroshotProvider,
-  Q as setManifest
+  J as Heroshot,
+  G as HeroshotProvider,
+  N as setManifest
 };

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/shared/nextPlugin.cjs

@@ -1,5 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("node:fs"),i=require("node:path"),l=require("./getManifest-BMMzQAE9.cjs");function d(e){return e.startsWith("public/")?e.slice(7):e}function p(e={},c={}){return{...e,webpack(t,m){const n=process.cwd();let o=null;c.config?o=i.resolve(n,c.config):o=l.findConfig(n);let f=l.emptyManifest();if(o&&s.existsSync(o)){const a=l.loadManifest(o);a&&(f={...a,outputDirectory:d(a.outputDirectory)},console.log(`[heroshot] Loaded config from ${o}`))}else console.log("[heroshot] No config found, using empty manifest");const r=i.join(n,"node_modules",".heroshot");s.mkdirSync(r,{recursive:!0});const u=i.join(r,"manifest.json");s.writeFileSync(u,JSON.stringify(f,null,2));const h=i.join(r,"client.js");return s.writeFileSync(h,`import { setManifest } from 'heroshot/next';
-import manifest from './manifest.json';
-setManifest(manifest);
-export default manifest;
-`),t.resolve??={},t.resolve.alias??={},t.resolve.alias["@heroshot/manifest"]=u,t.resolve.alias["virtual:heroshot-manifest"]=h,typeof e.webpack=="function"?e.webpack(t,m):t}}}exports.withHeroshot=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("node:fs"),i=require("node:path"),c=require("./getManifest-BMMzQAE9.cjs");function d(e){return e.startsWith("public/")?e.slice(7):e}function m(e={},l={}){return{...e,webpack(o,h){const r=process.cwd();let t=null;l.config?t=i.resolve(r,l.config):t=c.findConfig(r);let u=c.emptyManifest();if(t&&n.existsSync(t)){const s=c.loadManifest(t);s&&(u={...s,outputDirectory:d(s.outputDirectory)},console.log(`[heroshot] Loaded config from ${t}`))}else console.log("[heroshot] No config found, using empty manifest");const a=i.join(r,"node_modules",".heroshot");n.mkdirSync(a,{recursive:!0});const f=i.join(a,"manifest.json");return n.writeFileSync(f,JSON.stringify(u,null,2)),o.resolve??={},o.resolve.alias??={},o.resolve.alias["@heroshot/manifest"]=f,typeof e.webpack=="function"?e.webpack(o,h):o}}}exports.withHeroshot=m;

package/dist/integrations/shared/nextPlugin.js

@@ -1,41 +1,32 @@
-import { existsSync as h, mkdirSync as p, writeFileSync as m } from "node:fs";
-import { resolve as d, join as n } from "node:path";
-import { f as y, l as v, e as w } from "./getManifest-DfRVQbEx.js";
-function M(e) {
+import { existsSync as u, mkdirSync as m, writeFileSync as p } from "node:fs";
+import { resolve as h, join as c } from "node:path";
+import { f as d, l as y, e as w } from "./getManifest-DfRVQbEx.js";
+function g(e) {
   return e.startsWith("public/") ? e.slice(7) : e;
 }
-function k(e = {}, a = {}) {
+function D(e = {}, i = {}) {
   return {
     ...e,
-    webpack(t, u) {
-      const s = process.cwd();
+    webpack(t, f) {
+      const r = process.cwd();
       let o = null;
-      a.config ? o = d(s, a.config) : o = y(s);
-      let f = w();
-      if (o && h(o)) {
-        const i = v(o);
-        i && (f = {
-          ...i,
-          outputDirectory: M(i.outputDirectory)
+      i.config ? o = h(r, i.config) : o = d(r);
+      let n = w();
+      if (o && u(o)) {
+        const s = y(o);
+        s && (n = {
+          ...s,
+          outputDirectory: g(s.outputDirectory)
         }, console.log(`[heroshot] Loaded config from ${o}`));
       } else
         console.log("[heroshot] No config found, using empty manifest");
-      const r = n(s, "node_modules", ".heroshot");
-      p(r, { recursive: !0 });
-      const l = n(r, "manifest.json");
-      m(l, JSON.stringify(f, null, 2));
-      const c = n(r, "client.js");
-      return m(
-        c,
-        `import { setManifest } from 'heroshot/next';
-import manifest from './manifest.json';
-setManifest(manifest);
-export default manifest;
-`
-      ), t.resolve ??= {}, t.resolve.alias ??= {}, t.resolve.alias["@heroshot/manifest"] = l, t.resolve.alias["virtual:heroshot-manifest"] = c, typeof e.webpack == "function" ? e.webpack(t, u) : t;
+      const l = c(r, "node_modules", ".heroshot");
+      m(l, { recursive: !0 });
+      const a = c(l, "manifest.json");
+      return p(a, JSON.stringify(n, null, 2)), t.resolve ??= {}, t.resolve.alias ??= {}, t.resolve.alias["@heroshot/manifest"] = a, typeof e.webpack == "function" ? e.webpack(t, f) : t;
     }
   };
 }
 export {
-  k as withHeroshot
+  D as withHeroshot
 };

package/dist/integrations/shared/vitePlugin.cjs

@@ -1,4 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("node:fs"),d=require("node:path"),i=require("./getManifest-BMMzQAE9.cjs");function h(t){return t.startsWith("public/")||t.startsWith("static/")?t.slice(7):t}const u="virtual:heroshot-manifest",f="\0"+u;function m(t={}){let e=null,r=i.emptyManifest(),a="heroshot/vue";return{name:"heroshot",configResolved(o){const s=o.root;if(o.plugins.some(n=>n.name.includes("svelte"))&&(a="heroshot/svelte"),t.config?e=d.resolve(s,t.config):e=i.findConfig(s),e&&c.existsSync(e)){const n=i.loadManifest(e);n&&(r={...n,outputDirectory:h(n.outputDirectory)},console.log(`[heroshot] Loaded config from ${e}`))}else console.log("[heroshot] No config found, using empty manifest")},resolveId(o){if(o===u)return f},load(o){if(o===f)return`import { setManifest } from '${a}';
-const manifest = ${JSON.stringify(r,null,2)};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("node:fs"),c=require("node:path"),i=require("./getManifest-BMMzQAE9.cjs");function h(n){return n.startsWith("public/")||n.startsWith("static/")?n.slice(7):n}const r="virtual:heroshot-manifest",f="\0"+r;function m(n={}){let t=null,l=i.emptyManifest(),a="heroshot/vue";return{name:"heroshot",configResolved(e){const o=e.root;if(e.plugins.some(s=>s.name.includes("svelte"))&&(a="heroshot/svelte"),n.config?t=c.resolve(o,n.config):t=i.findConfig(o),t&&d.existsSync(t)){const s=i.loadManifest(t);s&&(l={...s,outputDirectory:h(s.outputDirectory)},console.log(`[heroshot] Loaded config from ${t}`))}else console.log("[heroshot] No config found, using empty manifest")},transform(e,o){if(!(o.includes("\0")||o.includes("node_modules"))&&(e.includes("from 'heroshot/")||e.includes('from "heroshot/')))return e.includes(r)?void 0:`import '${r}';
+${e}`},resolveId(e){if(e===r)return f},load(e){if(e===f)return`import { setManifest } from '${a}';
+const manifest = ${JSON.stringify(l,null,2)};
 setManifest(manifest);
-export default manifest;`},handleHotUpdate({file:o,server:s}){if(e&&o===e){const l=i.loadManifest(e);if(l){r=l,console.log("[heroshot] Config updated");const n=s.moduleGraph.getModuleById(f);n&&(s.moduleGraph.invalidateModule(n),s.ws.send({type:"full-reload"}))}}}}}exports.heroshot=m;
+export default manifest;`},handleHotUpdate({file:e,server:o}){if(t&&e===t){const u=i.loadManifest(t);if(u){l=u,console.log("[heroshot] Config updated");const s=o.moduleGraph.getModuleById(f);s&&(o.moduleGraph.invalidateModule(s),o.ws.send({type:"full-reload"}))}}}}}exports.heroshot=m;

package/dist/integrations/shared/vitePlugin.js

@@ -1,44 +1,50 @@
-import { existsSync as c } from "node:fs";
+import { existsSync as d } from "node:fs";
 import { resolve as m } from "node:path";
-import { e as d, f as h, l as a } from "./getManifest-DfRVQbEx.js";
-function p(e) {
-  return e.startsWith("public/") || e.startsWith("static/") ? e.slice(7) : e;
+import { e as c, f as h, l as a } from "./getManifest-DfRVQbEx.js";
+function p(n) {
+  return n.startsWith("public/") || n.startsWith("static/") ? n.slice(7) : n;
 }
-const u = "virtual:heroshot-manifest", l = "\0" + u;
-function D(e = {}) {
-  let t = null, i = d(), f = "heroshot/vue";
+const i = "virtual:heroshot-manifest", f = "\0" + i;
+function D(n = {}) {
+  let o = null, r = c(), u = "heroshot/vue";
   return {
     name: "heroshot",
-    configResolved(o) {
-      const s = o.root;
-      if (o.plugins.some((n) => n.name.includes("svelte")) && (f = "heroshot/svelte"), e.config ? t = m(s, e.config) : t = h(s), t && c(t)) {
-        const n = a(t);
-        n && (i = {
-          ...n,
-          outputDirectory: p(n.outputDirectory)
-        }, console.log(`[heroshot] Loaded config from ${t}`));
+    configResolved(e) {
+      const t = e.root;
+      if (e.plugins.some((s) => s.name.includes("svelte")) && (u = "heroshot/svelte"), n.config ? o = m(t, n.config) : o = h(t), o && d(o)) {
+        const s = a(o);
+        s && (r = {
+          ...s,
+          outputDirectory: p(s.outputDirectory)
+        }, console.log(`[heroshot] Loaded config from ${o}`));
       } else
         console.log("[heroshot] No config found, using empty manifest");
     },
-    resolveId(o) {
-      if (o === u)
-        return l;
+    // Auto-inject manifest import into entry modules so users don't need a separate plugin file
+    transform(e, t) {
+      if (!(t.includes("\0") || t.includes("node_modules")) && (e.includes("from 'heroshot/") || e.includes('from "heroshot/')))
+        return e.includes(i) ? void 0 : `import '${i}';
+${e}`;
     },
-    load(o) {
-      if (o === l)
-        return `import { setManifest } from '${f}';
-const manifest = ${JSON.stringify(i, null, 2)};
+    resolveId(e) {
+      if (e === i)
+        return f;
+    },
+    load(e) {
+      if (e === f)
+        return `import { setManifest } from '${u}';
+const manifest = ${JSON.stringify(r, null, 2)};
 setManifest(manifest);
 export default manifest;`;
     },
     // Hot reload on config changes
-    handleHotUpdate({ file: o, server: s }) {
-      if (t && o === t) {
-        const r = a(t);
-        if (r) {
-          i = r, console.log("[heroshot] Config updated");
-          const n = s.moduleGraph.getModuleById(l);
-          n && (s.moduleGraph.invalidateModule(n), s.ws.send({ type: "full-reload" }));
+    handleHotUpdate({ file: e, server: t }) {
+      if (o && e === o) {
+        const l = a(o);
+        if (l) {
+          r = l, console.log("[heroshot] Config updated");
+          const s = t.moduleGraph.getModuleById(f);
+          s && (t.moduleGraph.invalidateModule(s), t.ws.send({ type: "full-reload" }));
         }
       }
     }

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.0",
+  "version": "0.14.2",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",