heroshot 0.14.1 → 0.15.0

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/dist/mcp/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-B6Lg_Ant.js";
+import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-Fc-PkcTD.js";
 import { z } from "zod";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

package/dist/{snippet-B6Lg_Ant.js → snippet-Fc-PkcTD.js}

@@ -190,7 +190,7 @@ const resizeActionSchema = z.object({
 }).describe("Resize the browser viewport mid-flow.");
 const hideActionSchema = z.object({
 	type: z.literal("hide"),
-	selectors: z.array(z.string()).describe("Element selectors to hide (display: none)")
+	selectors: z.array(z.string()).describe("Element selectors to hide (visibility: hidden)")
 }).describe("Hide elements from screenshot. Use to remove cookie banners, chat widgets, ads.");
 /** Union of all supported action types. Actions execute sequentially before screenshot. */
 const actionSchema = z.discriminatedUnion("type", [
@@ -370,7 +370,8 @@ const configSchema = z.object({
 	jpegQuality: z.number().int().min(1).max(100).default(80).describe("JPEG compression quality (1-100), only used when outputFormat is \"jpeg\""),
 	browser: browserSchema.optional().describe("Default browser settings applied to all screenshots"),
 	workers: z.number().int().min(1).optional().describe("Number of parallel capture workers (default: 1)"),
-	screenshots: z.array(screenshotSchema).default([]).describe("Screenshot definitions")
+	screenshots: z.array(screenshotSchema).default([]).describe("Screenshot definitions"),
+	hiddenElements: z.record(z.string(), z.array(z.string())).optional().describe("Elements to hide per domain (hostname → CSS selectors)")
 });
 
 //#endregion
@@ -793,7 +794,8 @@ function buildCaptureOptions(config, viewportOnly) {
 	return {
 		format: config.outputFormat ?? "png",
 		quality: config.jpegQuality,
-		fullPage: !viewportOnly
+		fullPage: !viewportOnly,
+		hiddenElements: config.hiddenElements
 	};
 }
 /**
@@ -957,11 +959,11 @@ function executeHandleDialog(page, action) {
 
 //#endregion
 //#region src/sync/actions/hide.ts
-/** Hide elements by setting display: none */
+/** Hide elements by setting visibility: hidden (preserves layout) */
 async function executeHide(page, action) {
 	if (action.type !== "hide") return;
 	for (const selector of action.selectors) await page.locator(selector).evaluateAll((elements) => {
-		for (const element of elements) element.style.display = "none";
+		for (const element of elements) element.style.setProperty("visibility", "hidden", "important");
 	});
 }
 
@@ -1861,6 +1863,14 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
 		...navResult,
 		filename
 	};
+	if (captureOptions.hiddenElements) {
+		const { hiddenElements: hiddenByDomain } = captureOptions;
+		const { hostname } = new URL(url);
+		if (hiddenByDomain[hostname]?.length) await executeHide(page, {
+			type: "hide",
+			selectors: hiddenByDomain[hostname]
+		});
+	}
 	if (screenshot.actions && screenshot.actions.length > 0) try {
 		await executeActions(page, screenshot.actions);
 		await page.waitForTimeout(500);