heroshot 0.13.0 → 0.14.0

package/README.md

@@ -9,26 +9,28 @@
 <p align="center"><em>👆 This hero shot of <a href="https://heroshot.sh">heroshot.sh</a> is <a href="https://github.com/omachala/heroshot/blob/main/.github/workflows/update-screenshots.yml#L17">taken</a> by heroshot ⚡️</em></p>
 
 <p align="center">
+  <a href="https://www.npmjs.com/package/heroshot"><img src="https://img.shields.io/npm/dt/heroshot?style=for-the-badge" alt="npm downloads"></a>
   <a href="https://www.npmjs.com/package/heroshot"><img src="https://img.shields.io/npm/v/heroshot?style=for-the-badge&logo=npm" alt="npm version"></a>
-  <a href="https://github.com/omachala/heroshot/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/heroshot?style=for-the-badge" alt="license"></a>
   <a href="https://codecov.io/gh/omachala/heroshot"><img src="https://img.shields.io/codecov/c/github/omachala/heroshot?style=for-the-badge" alt="coverage"></a>
   <a href="https://sonarcloud.io/summary/new_code?id=omachala_heroshot"><img src="https://img.shields.io/sonar/quality_gate/omachala_heroshot?server=https%3A%2F%2Fsonarcloud.io&style=for-the-badge&logo=sonarcloud" alt="quality gate"></a>
   <a href="https://heroshot.sh"><img src="https://img.shields.io/badge/docs-heroshot.sh-blue?style=for-the-badge" alt="docs"></a>
 </p>
 
+<p align="center">Like Heroshot? Share your story — <a href="https://x.com/intent/tweet?url=https%3A%2F%2Fheroshot.sh">X/Twitter</a> · <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fheroshot.sh">LinkedIn</a> · <a href="https://www.reddit.com/submit?url=https%3A%2F%2Fheroshot.sh&title=Heroshot%20%E2%80%93%20Define%20screenshots%20once%2C%20update%20them%20forever">Reddit</a> ❤️</p>
+
 Your app changes constantly. New features, design tweaks, bug fixes. Meanwhile, the screenshots in your README and docs quietly become lies.
 
 The manual fix is tedious: open browser, navigate, log in, screenshot, crop, save, commit. Now do that for every image. Now do it again next month.
 
-**Heroshot fixes this.** Define your screenshots once - point and click, no CSS selectors - and regenerate them with one command whenever you need.
+**Heroshot fixes this.** Define your screenshots once - point and click, no CSS selectors. Style them with the visual editor, add annotations to highlight what matters, and regenerate everything with one command.
 
 ```bash
 npx heroshot
 ```
 
-First run opens a browser with a visual picker. Click what you want, name it, done. Screenshots land in `heroshots/`, config saves to `.heroshot/config.json`. Next run regenerates everything headlessly.
+First run opens a browser with a visual editor. Pick elements, adjust padding, style borders, edit text, and add annotations (arrows, rectangles, callouts). Screenshots land in `heroshots/`, config saves to `.heroshot/config.json`. Next run regenerates everything headlessly.
 
-https://github.com/user-attachments/assets/f35600a6-9220-4bd2-a8c6-a6b4ee8a33d9
+https://github.com/user-attachments/assets/1636d404-1e5f-4151-9aba-d5676ed3ff2a
 
 ## Use in Your Docs
 
@@ -104,11 +106,15 @@ One component/macro, all variants - light/dark mode switches automatically, resp
 | **CI/CD Setup**     | [Automated updates](https://heroshot.sh/docs/guide/automated-updates) |
 | **CLI Reference**   | [All commands & flags](https://heroshot.sh/docs/cli)                  |
 
-## Contributing
+## Support the Project
+
+Your suggestions and feedback are highly appreciated. Please feel free to [start a discussion](https://github.com/omachala/heroshot/discussions) or [create an issue](https://github.com/omachala/heroshot/issues) to share your experience with the tool or to discuss a feature/issue.
 
-This is a community project aiming to solve screenshot automation end-to-end and any feedback is valuable. Open an [issue](https://github.com/omachala/heroshot/issues) for bugs, questions, or feature requests. Pull requests are more than welcome.
+If you find heroshot useful, saves you a lot of work, and lets you sleep much better, then consider supporting the project by any of the following means:
 
-If you like it, give the repo a ⭐
+- **Star the repo** — it helps others discover heroshot
+- **Spread the word** — share the project on social media or with friends
+- **Report bugs or propose solutions** — open an [issue](https://github.com/omachala/heroshot/issues) or [pull request](https://github.com/omachala/heroshot/pulls)
 
 ## License
 

package/dist/cli/cli.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
-import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-Bwn8XcVs.js";
+import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-B6Lg_Ant.js";
 import { existsSync, readFileSync, rmSync } from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { Command } from "commander";
 import { z } from "zod";
 
@@ -721,7 +722,7 @@ function listAction(options, globalOptions) {
 function getVersion() {
 	if (typeof HEROSHOT_VERSION !== "undefined") return HEROSHOT_VERSION;
 	try {
-		const packageJsonPath = path.join(import.meta.dirname, "..", "..", "package.json");
+		const packageJsonPath = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "..", "package.json");
 		const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
 		if (packageJson && typeof packageJson === "object" && "version" in packageJson) return String(packageJson.version);
 	} catch {}

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+
+//#region integrations/shared/types.d.ts
+/**
+ * Shared types for heroshot framework integrations.
+ */
+/** Screenshot info needed by components */
+type ScreenshotInfo = {
+  /** Slugified base filename (without extension) */slug: string; /** Viewport variants (empty array if none) */
+  viewports: string[]; /** Color schemes captured */
+  colorSchemes: ('light' | 'dark')[]; /** Output format */
+  format: 'png' | 'jpeg';
+};
+/** Manifest structure (derived from config.json) */
+type Manifest = {
+  /** Manifest version for compatibility */version: 1; /** Output directory relative to project root */
+  outputDirectory: string; /** Screenshots indexed by name */
+  screenshots: Record<string, ScreenshotInfo>;
+};
+//#endregion
+//#region integrations/shared/configTransform.d.ts
+/**
+ * Raw config.json structure (subset of fields we need)
+ */
+interface ConfigJson {
+  outputDirectory?: string;
+  outputFormat?: 'png' | 'jpeg';
+  browser?: {
+    colorScheme?: 'light' | 'dark';
+  };
+  screenshots: Array<{
+    id: string;
+    name: string;
+    viewports?: string[];
+  }>;
+}
+/**
+ * Transform config.json into manifest structure.
+ *
+ * This is a pure function - no file system access needed.
+ * Use it when you already have the config object in memory.
+ */
+declare function configToManifest(config: ConfigJson): Manifest;
+//#endregion
+export { ConfigJson, type Manifest, type ScreenshotInfo, configToManifest };

package/dist/index.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+//#region integrations/shared/configTransform.ts
+/**
+* Slugify a single path segment for use in filenames
+*/
+function slugifySegment(text) {
+	return text.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "");
+}
+/**
+* Slugify a string for use in filenames.
+* Preserves forward slashes to support subdirectory output paths.
+*/
+function slugify(text) {
+	return text.split("/").map(slugifySegment).filter(Boolean).join("/");
+}
+/**
+* Determine color schemes from config
+*/
+function getColorSchemes(colorScheme) {
+	if (colorScheme === "light") return ["light"];
+	if (colorScheme === "dark") return ["dark"];
+	return ["light", "dark"];
+}
+/**
+* Transform config.json into manifest structure.
+*
+* This is a pure function - no file system access needed.
+* Use it when you already have the config object in memory.
+*/
+function configToManifest(config) {
+	const colorSchemes = getColorSchemes(config.browser?.colorScheme);
+	const format = config.outputFormat ?? "png";
+	const outputDirectory = config.outputDirectory ?? "heroshots";
+	const screenshots = {};
+	for (const screenshot of config.screenshots) screenshots[screenshot.name] = {
+		slug: slugify(screenshot.name),
+		viewports: screenshot.viewports ?? [],
+		colorSchemes,
+		format
+	};
+	return {
+		version: 1,
+		outputDirectory,
+		screenshots
+	};
+}
+
+//#endregion
+export { configToManifest };

package/dist/integrations/next/index.d.ts

@@ -0,0 +1,3 @@
+export { Heroshot, HeroshotProvider } from '../../react/src/components/Heroshot';
+export { setManifest } from '../../shared/manifestStore';
+export type { Manifest } from '../../shared/types';

package/dist/integrations/next/index.js

@@ -0,0 +1,134 @@
+"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];
+}
+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(e, t, a = {}) {
+  const s = N(t, a);
+  return `${e.outputDirectory}/${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()
+  };
+  return s.includes("light") && (n.light = c("light")), s.includes("dark") && (n.dark = c("dark")), n;
+}
+function R(e, t) {
+  const a = H(e, t), s = {};
+  for (const r of t.viewports)
+    s[r] = H(e, t, r);
+  return {
+    ...a,
+    viewports: s
+  };
+}
+let x = null;
+function Q(e) {
+  x = e;
+}
+function V() {
+  return x;
+}
+const D = $(null);
+function _({
+  manifest: e,
+  children: t
+}) {
+  return /* @__PURE__ */ h(D.Provider, { value: e, children: t });
+}
+function S() {
+  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();
+    e.current = s.hasThemeHandling;
+    const r = () => {
+      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());
+    });
+    c.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme", "class"]
+    });
+    const n = globalThis.matchMedia?.("(prefers-color-scheme: dark)"), i = () => {
+      a(r());
+    };
+    return n?.addEventListener("change", i), () => {
+      c.disconnect(), n?.removeEventListener("change", i);
+    };
+  }, []), t;
+}
+const k = {
+  mobile: 430,
+  // iPhone 15/16 Pro Max viewport
+  tablet: 768,
+  desktop: 1280
+};
+function q({
+  name: e,
+  alt: t = "",
+  manifest: a,
+  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(() => {
+    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 [];
+    const { viewports: o } = u, f = Object.keys(o);
+    if (f.length === 0) return [];
+    const b = [...f].sort((l, m) => {
+      const d = k[l] || Number.parseInt(l.split("x")[0] || "1280", 10), p = k[m] || Number.parseInt(m.split("x")[0] || "1280", 10);
+      return d - p;
+    });
+    return b.map((l, m) => {
+      const d = o[l];
+      if (!d) return null;
+      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,
+        width: w,
+        media: M ? void 0 : `(max-width: ${w}px)`
+      };
+    }).filter((l) => l !== null);
+  }, [u, i, r]), P = T.length > 0;
+  if (!n) {
+    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) {
+    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: [
+    T.map((o) => /* @__PURE__ */ h(
+      "source",
+      {
+        srcSet: o.srcset,
+        media: o.media
+      },
+      `${o.viewport}-${r}`
+    )),
+    /* @__PURE__ */ h("img", { src: v, alt: t, loading: "lazy" })
+  ] }) : /* @__PURE__ */ h("img", { src: v, alt: t, className: s, loading: "lazy" });
+}
+export {
+  q as Heroshot,
+  _ as HeroshotProvider,
+  Q as setManifest
+};

package/dist/integrations/shared/docusaurusPlugin.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("node:fs"),n=require("node:path"),s=require("./getManifest-ClS1WrNU.cjs");function h(t){return t.startsWith("static/")?t.slice(7):t}function g(t={}){return function(l){const{siteDir:a,generatedFilesDir:c}=l;let e=null;t.config?e=n.resolve(a,t.config):e=s.findConfig(a);let f=s.emptyManifest();if(e&&o.existsSync(e)){const r=s.loadManifest(e);r&&(f={...r,outputDirectory:h(r.outputDirectory)},console.log(`[heroshot] Loaded config from ${e}`))}else console.log("[heroshot] No config found, using empty manifest");const i=n.join(c,"heroshot-manifest.json");o.mkdirSync(n.dirname(i),{recursive:!0}),o.writeFileSync(i,JSON.stringify(f,null,2));const u=n.join(c,"heroshot-client.js");return o.writeFileSync(u,`import { setManifest } from 'heroshot/docusaurus';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("node:fs"),n=require("node:path"),s=require("./getManifest-BMMzQAE9.cjs");function h(t){return t.startsWith("static/")?t.slice(7):t}function g(t={}){return function(l){const{siteDir:a,generatedFilesDir:c}=l;let e=null;t.config?e=n.resolve(a,t.config):e=s.findConfig(a);let f=s.emptyManifest();if(e&&o.existsSync(e)){const r=s.loadManifest(e);r&&(f={...r,outputDirectory:h(r.outputDirectory)},console.log(`[heroshot] Loaded config from ${e}`))}else console.log("[heroshot] No config found, using empty manifest");const i=n.join(c,"heroshot-manifest.json");o.mkdirSync(n.dirname(i),{recursive:!0}),o.writeFileSync(i,JSON.stringify(f,null,2));const u=n.join(c,"heroshot-client.js");return o.writeFileSync(u,`import { setManifest } from 'heroshot/docusaurus';
 import manifest from '@heroshot/manifest';
 setManifest(manifest);
 `),{name:"heroshot",configureWebpack(){return{resolve:{alias:{"@heroshot/manifest":i}}}},getClientModules(){return[u]},getPathsToWatch(){return e?[e]:[]}}}}exports.heroshot=g;

package/dist/integrations/shared/docusaurusPlugin.js

@@ -1,6 +1,6 @@
 import { existsSync as l, mkdirSync as h, writeFileSync as a } from "node:fs";
 import { resolve as m, join as c, dirname as g } from "node:path";
-import { f as d, l as p, e as y } from "./getManifest-CZSH5yc7.js";
+import { f as d, l as p, e as y } from "./getManifest-DfRVQbEx.js";
 function M(t) {
   return t.startsWith("static/") ? t.slice(7) : t;
 }

package/dist/integrations/shared/getManifest-BMMzQAE9.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("node:fs"),c=require("node:path");function u(o){return o.toLowerCase().replaceAll(/[^a-z0-9]+/g,"-").replaceAll(/(?:^-|-$)/g,"")}function f(o){return o.split("/").map(u).filter(Boolean).join("/")}function l(o){return o==="light"?["light"]:o==="dark"?["dark"]:["light","dark"]}function a(o){const n=l(o.browser?.colorScheme),t=o.outputFormat??"png",i=o.outputDirectory??"heroshots",r={};for(const e of o.screenshots)r[e.name]={slug:f(e.name),viewports:e.viewports??[],colorSchemes:n,format:t};return{version:1,outputDirectory:i,screenshots:r}}const h=["heroshot.config.json","heroshots/config.json",".heroshot/config.json"];function g(o){for(const n of h){const t=c.resolve(o,n);if(s.existsSync(t))return t}return null}function p(o){try{const n=s.readFileSync(o,"utf-8"),t=JSON.parse(n);return!t.screenshots||!Array.isArray(t.screenshots)?(console.warn("[heroshot] Invalid config: missing screenshots array"),null):a(t)}catch(n){return console.warn("[heroshot] Failed to load config:",n),null}}function d(){return{version:1,outputDirectory:"heroshots",screenshots:{}}}exports.emptyManifest=d;exports.findConfig=g;exports.loadManifest=p;

package/dist/integrations/shared/{getManifest-CZSH5yc7.js → getManifest-DfRVQbEx.js}

@@ -1,36 +1,39 @@
 import { existsSync as c, readFileSync as i } from "node:fs";
-import { resolve as u } from "node:path";
-function a(o) {
+import { resolve as l } from "node:path";
+function u(o) {
   return o.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "");
 }
-function l(o) {
-  return o === "light" ? ["light"] : o === "dark" ? ["dark"] : ["light", "dark"];
+function a(o) {
+  return o.split("/").map(u).filter(Boolean).join("/");
 }
-const f = ["heroshot.config.json", "heroshots/config.json", ".heroshot/config.json"];
-function m(o) {
-  for (const t of f) {
-    const r = u(o, t);
-    if (c(r))
-      return r;
-  }
-  return null;
+function f(o) {
+  return o === "light" ? ["light"] : o === "dark" ? ["dark"] : ["light", "dark"];
 }
 function h(o) {
-  const t = l(o.browser?.colorScheme), r = o.outputFormat ?? "png", s = o.outputDirectory ?? "heroshots", n = {};
-  for (const e of o.screenshots)
-    n[e.name] = {
-      slug: a(e.name),
-      viewports: e.viewports ?? [],
+  const t = f(o.browser?.colorScheme), r = o.outputFormat ?? "png", s = o.outputDirectory ?? "heroshots", e = {};
+  for (const n of o.screenshots)
+    e[n.name] = {
+      slug: a(n.name),
+      viewports: n.viewports ?? [],
       colorSchemes: t,
       format: r
     };
   return {
     version: 1,
     outputDirectory: s,
-    screenshots: n
+    screenshots: e
   };
 }
+const g = ["heroshot.config.json", "heroshots/config.json", ".heroshot/config.json"];
 function y(o) {
+  for (const t of g) {
+    const r = l(o, t);
+    if (c(r))
+      return r;
+  }
+  return null;
+}
+function d(o) {
   try {
     const t = i(o, "utf-8"), r = JSON.parse(t);
     return !r.screenshots || !Array.isArray(r.screenshots) ? (console.warn("[heroshot] Invalid config: missing screenshots array"), null) : h(r);
@@ -38,7 +41,7 @@ function y(o) {
     return console.warn("[heroshot] Failed to load config:", t), null;
   }
 }
-function d() {
+function S() {
   return {
     version: 1,
     outputDirectory: "heroshots",
@@ -46,7 +49,7 @@ function d() {
   };
 }
 export {
-  d as e,
-  m as f,
-  y as l
+  S as e,
+  y as f,
+  d as l
 };

package/dist/integrations/shared/nextPlugin.cjs

@@ -0,0 +1,5 @@
+"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;

package/dist/integrations/shared/nextPlugin.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Next.js plugin for heroshot framework integration.
+ *
+ * Provides a config wrapper that injects manifest via webpack alias.
+ *
+ * Usage in next.config.js (webpack mode):
+ * ```js
+ * const { withHeroshot } = require('heroshot/plugins/next');
+ *
+ * module.exports = withHeroshot({
+ *   // ... your Next.js config
+ * });
+ * ```
+ *
+ * For Turbopack mode (Next.js 15+ default), use manual setup:
+ * ```tsx
+ * // app/layout.tsx
+ * import { setManifest } from 'heroshot/next';
+ * import { configToManifest } from 'heroshot';
+ * import config from '../.heroshot/config.json';
+ * setManifest(configToManifest(config));
+ * ```
+ */
+export interface WithHeroshotOptions {
+    /**
+     * Path to config.json (relative to project root)
+     * @default auto-detected from heroshot.config.json, heroshots/config.json, etc.
+     */
+    config?: string;
+}
+interface WebpackConfig {
+    resolve?: {
+        alias?: Record<string, string>;
+    };
+}
+interface WebpackOptions {
+    isServer: boolean;
+}
+interface NextConfig {
+    webpack?: (config: WebpackConfig, options: WebpackOptions) => WebpackConfig;
+    [key: string]: unknown;
+}
+/**
+ * Heroshot Next.js config wrapper
+ *
+ * Wraps your Next.js config to inject manifest via webpack alias.
+ * Works with webpack mode. For Turbopack, use manual setManifest().
+ */
+export declare function withHeroshot(nextConfig?: NextConfig, options?: WithHeroshotOptions): NextConfig;
+export {};

package/dist/integrations/shared/nextPlugin.js

@@ -0,0 +1,41 @@
+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) {
+  return e.startsWith("public/") ? e.slice(7) : e;
+}
+function k(e = {}, a = {}) {
+  return {
+    ...e,
+    webpack(t, u) {
+      const s = 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)
+        }, 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;
+    }
+  };
+}
+export {
+  k as withHeroshot
+};

package/dist/integrations/shared/virtual.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Type declarations for heroshot virtual modules.
+ *
+ * Users should add this to their project's tsconfig.json:
+ * {
+ *   "compilerOptions": {
+ *     "types": ["heroshot/virtual"]
+ *   }
+ * }
+ */
+
+declare module 'virtual:heroshot-manifest' {
+  import type { Manifest } from 'heroshot/vue';
+  const manifest: Manifest;
+  export default manifest;
+}
+
+// Docusaurus plugin alias
+declare module '@heroshot/manifest' {
+  import type { Manifest } from 'heroshot/docusaurus';
+  const manifest: Manifest;
+  export default manifest;
+}

package/dist/integrations/shared/vitePlugin.cjs

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

package/dist/integrations/shared/vitePlugin.js

@@ -1,44 +1,44 @@
-import { existsSync as u } from "node:fs";
-import { resolve as d } from "node:path";
-import { e as c, f as m, l } from "./getManifest-CZSH5yc7.js";
-function h(e) {
-  return e.startsWith("public/") ? e.slice(7) : e;
+import { existsSync as c } 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;
 }
-const a = "virtual:heroshot-manifest", r = "\0" + a;
+const u = "virtual:heroshot-manifest", l = "\0" + u;
 function D(e = {}) {
-  let o = null, s = c();
+  let t = null, i = d(), f = "heroshot/vue";
   return {
     name: "heroshot",
-    configResolved(t) {
-      const n = t.root;
-      if (e.config ? o = d(n, e.config) : o = m(n), o && u(o)) {
-        const i = l(o);
-        i && (s = {
-          ...i,
-          outputDirectory: h(i.outputDirectory)
-        }, console.log(`[heroshot] Loaded config from ${o}`));
+    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}`));
       } else
         console.log("[heroshot] No config found, using empty manifest");
     },
-    resolveId(t) {
-      if (t === a)
-        return r;
+    resolveId(o) {
+      if (o === u)
+        return l;
     },
-    load(t) {
-      if (t === r)
-        return `import { setManifest } from 'heroshot/vitepress';
-const manifest = ${JSON.stringify(s, null, 2)};
+    load(o) {
+      if (o === l)
+        return `import { setManifest } from '${f}';
+const manifest = ${JSON.stringify(i, null, 2)};
 setManifest(manifest);
 export default manifest;`;
     },
     // Hot reload on config changes
-    handleHotUpdate({ file: t, server: n }) {
-      if (o && t === o) {
-        const i = l(o);
-        if (i) {
-          s = i, console.log("[heroshot] Config updated");
-          const f = n.moduleGraph.getModuleById(r);
-          f && (n.moduleGraph.invalidateModule(f), n.ws.send({ type: "full-reload" }));
+    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" }));
         }
       }
     }

package/dist/integrations/svelte/components/Heroshot.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+import {
+  getScreenshot,
+  getVariantPaths,
+  getManifest,
+  type Manifest,
+  type VariantPaths,
+} from '../shared.js';
+
+interface Props {
+  /** Screenshot name (as defined in heroshot config) */
+  name: string;
+  /** Alt text for accessibility */
+  alt?: string;
+  /** Manifest data - optional if using heroshot vite plugin */
+  manifest?: Manifest;
+  /** CSS class to apply to the image */
+  class?: string;
+}
+
+const { name, alt = '', manifest: manifestProp, class: className }: Props = $props();
+
+// Use prop manifest or fall back to global manifest (set by plugin)
+const activeManifest: Manifest | null = $derived(manifestProp ?? getManifest());
+
+// Dark mode detection
+let isDark = $state(false);
+
+// Track if site has explicit theme handling (detected on mount)
+let siteHasThemeHandling = false;
+
+/**
+ * Dark mode detection priority:
+ * 1. Site theme (.dark class) - SvelteKit/frameworks set this based on user choice
+ * 2. System preference (prefers-color-scheme) - for sites without framework theme handling
+ * 3. Default to light
+ */
+function detectDarkMode(): boolean {
+  if (globalThis.window === undefined) return false;
+
+  // 1. Check site theme (.dark class) - explicit user/framework choice
+  if (document.documentElement.classList.contains('dark')) {
+    return true;
+  }
+
+  // If site has theme handling (detected previously), absence of .dark = light mode
+  if (siteHasThemeHandling) {
+    return false;
+  }
+
+  // 2. Fall back to system preference for sites without theme handling
+  if (globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+    return true;
+  }
+
+  // 3. Default to light
+  return false;
+}
+
+$effect(() => {
+  // Detect if site has theme handling by checking for class management
+  siteHasThemeHandling =
+    document.documentElement.classList.length > 0 ||
+    document.documentElement.dataset.theme !== undefined;
+
+  isDark = detectDarkMode();
+
+  // Watch for class changes on documentElement (site theme toggle)
+  const observer = new MutationObserver(() => {
+    // Once we see a class change, we know the site has theme handling
+    siteHasThemeHandling = true;
+    isDark = document.documentElement.classList.contains('dark');
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
+  // Listen for system preference changes
+  const mediaQuery = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+  const handleMediaChange = () => {
+    isDark = detectDarkMode();
+  };
+  mediaQuery?.addEventListener('change', handleMediaChange);
+
+  return () => {
+    observer.disconnect();
+    mediaQuery?.removeEventListener('change', handleMediaChange);
+  };
+});
+
+// Get screenshot from manifest
+const screenshot = $derived(activeManifest ? getScreenshot(activeManifest, name) : undefined);
+
+// Get all variant paths
+const paths: VariantPaths | null = $derived(
+  screenshot && activeManifest ? getVariantPaths(activeManifest, screenshot) : null
+);
+
+// Current theme-based src (fallback for no viewports)
+const themeSrc = $derived.by(() => {
+  if (!paths) return '';
+  const { light, dark } = paths;
+  if (isDark && dark) return dark;
+  if (!isDark && light) return light;
+  return paths.default;
+});
+
+// Viewport width mapping for media queries
+const VIEWPORT_WIDTHS: Record<string, number> = {
+  mobile: 430, // iPhone 15/16 Pro Max viewport
+  tablet: 768,
+  desktop: 1280,
+};
+
+interface SourceEntry {
+  viewport: string;
+  srcset: string;
+  width: number;
+  media: string | undefined;
+}
+
+// Generate sources for <picture> element (sorted by width ascending)
+const sources: SourceEntry[] = $derived.by(() => {
+  if (!paths || !screenshot) return [];
+  const { viewports } = paths;
+  const viewportNames = Object.keys(viewports);
+
+  if (viewportNames.length === 0) return [];
+
+  // Sort viewports by width ascending (smallest first - browser picks FIRST matching source)
+  const sorted = [...viewportNames].sort((a, b) => {
+    const widthA = VIEWPORT_WIDTHS[a] || Number.parseInt(a.split('x')[0] || '1280', 10);
+    const widthB = VIEWPORT_WIDTHS[b] || Number.parseInt(b.split('x')[0] || '1280', 10);
+    return widthA - widthB;
+  });
+
+  return sorted
+    .map((viewport, index): SourceEntry | null => {
+      const vpPaths = viewports[viewport];
+      if (!vpPaths) return null;
+
+      const lightSrc = vpPaths.light || vpPaths.default;
+      const darkSrc = vpPaths.dark || vpPaths.light || vpPaths.default;
+      const width =
+        VIEWPORT_WIDTHS[viewport] || Number.parseInt(viewport.split('x')[0] || '1280', 10);
+
+      // Last (largest) viewport doesn't need a max-width constraint - it's the fallback
+      const isLast = index === sorted.length - 1;
+
+      // Use isDark to pick the correct src (JavaScript-based theme detection)
+      const currentSrc = isDark ? darkSrc : lightSrc;
+
+      return {
+        viewport,
+        srcset: currentSrc,
+        width,
+        media: isLast ? undefined : `(max-width: ${width}px)`,
+      };
+    })
+    .filter((s): s is SourceEntry => s !== null);
+});
+
+// Check if we have viewport variants
+const hasViewports = $derived(sources.length > 0);
+
+// Warning message
+const warning = $derived.by(() => {
+  if (!activeManifest) {
+    return 'Heroshot: No manifest found. Add heroshot() plugin to vite config or pass manifest prop.';
+  }
+  if (!screenshot) {
+    return `Heroshot: Screenshot "${name}" not found in config`;
+  }
+  return null;
+});
+
+if (warning && typeof console !== 'undefined') {
+  console.warn(warning);
+}
+</script>
+
+<!-- Use <picture> for responsive viewport switching -->
+<!-- Theme switching is JS-based (isDark reactive), viewport switching is CSS-based (media queries) -->
+{#if screenshot && hasViewports}
+  <picture class={className}>
+    {#each sources as source (`${source.viewport}-${isDark}`)}
+      <source srcset={source.srcset} media={source.media} />
+    {/each}
+    <img src={themeSrc} {alt} loading="lazy" />
+  </picture>
+<!-- Fallback to simple img for no viewports -->
+{:else if screenshot}
+  <img src={themeSrc} {alt} class={className} loading="lazy" />
+{:else}
+  <span style="color: red; font-size: 12px">{warning}</span>
+{/if}

package/dist/integrations/svelte/index.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from 'svelte';
+
+export interface Manifest {
+  version: 1;
+  outputDirectory: string;
+  screenshots: Record<string, {
+    slug: string;
+    viewports: string[];
+    colorSchemes: ('light' | 'dark')[];
+    format: 'png' | 'jpeg';
+  }>;
+}
+
+export interface HeroshotProps {
+  name: string;
+  alt?: string;
+  manifest?: Manifest;
+  class?: string;
+}
+
+export declare class Heroshot extends SvelteComponent<HeroshotProps> {}
+export default Heroshot;
+
+export declare function setManifest(manifest: Manifest): void;
+export declare function getManifest(): Manifest | null;

package/dist/integrations/svelte/index.js

@@ -0,0 +1,4 @@
+// Svelte integration - re-exports component + shared utilities
+// The .svelte file is compiled by the consumer's bundler (SvelteKit/Vite)
+export { default as Heroshot, default } from './components/Heroshot.svelte';
+export { setManifest, getManifest } from './shared.js';

package/dist/integrations/svelte/shared.js

@@ -0,0 +1,43 @@
+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 c = e === "jpeg" ? "jpg" : "png";
+  return `${s.join("-")}.${c}`;
+}
+function f(t, n, o = {}) {
+  const e = l(n, o);
+  return `${t.outputDirectory}/${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()
+  };
+  return e.includes("light") && (s.light = i("light")), e.includes("dark") && (s.dark = i("dark")), s;
+}
+function g(t, n) {
+  const o = a(t, n), e = {};
+  for (const r of n.viewports)
+    e[r] = a(t, n, r);
+  return {
+    ...o,
+    viewports: e
+  };
+}
+let u = null;
+function p(t) {
+  u = t;
+}
+function d() {
+  return u;
+}
+export {
+  l as generateFilename,
+  f as generatePath,
+  d as getManifest,
+  h as getScreenshot,
+  g as getVariantPaths,
+  p as setManifest
+};

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-Bwn8XcVs.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-B6Lg_Ant.js";
 import { z } from "zod";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

package/dist/{snippet-Bwn8XcVs.js → snippet-B6Lg_Ant.js}

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { intro, log, note, outro, spinner } from "@clack/prompts";
 import { z } from "zod";
 import { createCipheriv, createDecipheriv, createHash, randomBytes, scryptSync } from "node:crypto";
@@ -387,7 +388,8 @@ function parseConfig(input) {
 //#region src/configFile.ts
 const HEROSHOT_DIRECTORY_NAME = ".heroshot";
 const CONFIG_FILENAME = "config.json";
-const README_TEMPLATE_PATH = path.join(import.meta.dirname, "templates", "heroshotReadme.txt");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const README_TEMPLATE_PATH = path.join(__dirname, "templates", "heroshotReadme.txt");
 /**
 * Get the .heroshot directory path for a project
 */
@@ -576,7 +578,7 @@ function findPackageRoot(startDirectory) {
 	return startDirectory;
 }
 /** Path to editor directory */
-const EDITOR_DIR = path.join(findPackageRoot(import.meta.dirname), "editor");
+const EDITOR_DIR = path.join(findPackageRoot(path.dirname(fileURLToPath(import.meta.url))), "editor");
 
 //#endregion
 //#region src/browser/browserDetect.ts
@@ -847,21 +849,25 @@ function parseViewport(variant) {
 //#endregion
 //#region src/utils/screenshotPath.ts
 /**
-* Slugify a string for use in filenames
+* Slugify a single path segment for use in filenames
 */
-function slugify(text) {
+function slugifySegment(text) {
 	return text.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "");
 }
 /**
-* Generate screenshot filename
+* Generate screenshot filename.
+* Supports subdirectory paths via forward slashes in the name (e.g., "registry/login-01").
 */
 function generateScreenshotFilename(options) {
 	const { name, viewport, colorScheme, format = "png" } = options;
-	const parts = [slugify(name)];
+	const segments = name.split("/").map(slugifySegment).filter(Boolean);
+	const directory = segments.length > 1 ? segments.slice(0, -1).join("/") : "";
+	const parts = [segments.at(-1) ?? ""];
 	if (viewport) parts.push(viewport);
 	if (colorScheme) parts.push(colorScheme);
 	const extension = format === "jpeg" ? "jpg" : "png";
-	return `${parts.join("-")}.${extension}`;
+	const filename = `${parts.join("-")}.${extension}`;
+	return directory ? `${directory}/${filename}` : filename;
 }
 
 //#endregion
@@ -2124,12 +2130,13 @@ function loadEncryptedSession(sessionKeyOption) {
 */
 /**
 * Get list of existing screenshot files in output directory.
-* Returns only .png and .jpg files.
+* Scans recursively to support subdirectory output paths.
+* Returns relative paths (e.g., "registry/login-01-light.png").
 */
 function getExistingFiles(outputDirectory) {
 	if (!existsSync(outputDirectory)) return [];
 	try {
-		return readdirSync(outputDirectory).filter((file) => file.endsWith(".png") || file.endsWith(".jpg"));
+		return readdirSync(outputDirectory, { recursive: true }).map((file) => typeof file === "string" ? file : file.toString()).filter((file) => file.endsWith(".png") || file.endsWith(".jpg"));
 	} catch {
 		return [];
 	}

package/editor/dist/editor.js

@@ -4069,7 +4069,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     function isElementFill(value) {
       return value === "original" || value === "solid" || value === "transparent";
     }
-    let barStyle = /* @__PURE__ */ user_derived(() => `left:${$$props.position.x + get(dragOffset).x}px;top:${$$props.position.y + get(dragOffset).y}px;transform:translateX(-50%);`);
+    let barStyle = /* @__PURE__ */ user_derived(() => {
+      const x = $$props.position.x + get(dragOffset).x;
+      const y = $$props.position.y + get(dragOffset).y;
+      if ($$props.position.placement === "right") {
+        return `left:${x}px;top:${y}px;transform:translateY(-50%);`;
+      }
+      if ($$props.position.placement === "left") {
+        return `left:${x}px;top:${y}px;transform:translate(-100%,-50%);`;
+      }
+      return `left:${x}px;top:${y}px;transform:translateX(-50%);`;
+    });
     var fragment = comment();
     var node = first_child(fragment);
     {
@@ -5994,9 +6004,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const typeHandler = getAnnotationType(get(selectedAnnotation).type);
       if (!typeHandler) return null;
       const bbox = typeHandler.getBBox(get(selectedAnnotation));
+      const bboxCenterX = $$props.elementRect.left + (bbox.minX + bbox.maxX) / 2;
+      const placeRight = bboxCenterX < globalThis.innerWidth / 2;
+      const bboxCenterY = $$props.elementRect.top + (bbox.minY + bbox.maxY) / 2;
       return {
-        x: $$props.elementRect.left + (bbox.minX + bbox.maxX) / 2,
-        y: $$props.elementRect.top + bbox.maxY + 12
+        x: placeRight ? $$props.elementRect.left + bbox.maxX + 12 : $$props.elementRect.left + bbox.minX - 12,
+        y: bboxCenterY,
+        placement: placeRight ? "right" : "left"
       };
     }
     function updateStyle(newStyle) {
@@ -7422,9 +7436,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return null;
       }
       if (get(selectionContext).type === "element" && get(pickerExpandedRect)) {
+        const viewportWidth = globalThis.innerWidth;
+        const elementCenterX = get(pickerExpandedRect).left + get(pickerExpandedRect).width / 2;
+        const placeRight = elementCenterX < viewportWidth / 2;
         return {
-          x: get(pickerExpandedRect).left + get(pickerExpandedRect).width / 2,
-          y: get(pickerExpandedRect).top + get(pickerExpandedRect).height + 12
+          x: placeRight ? get(pickerExpandedRect).left + get(pickerExpandedRect).width + 12 : get(pickerExpandedRect).left - 12,
+          y: get(pickerExpandedRect).top + get(pickerExpandedRect).height / 2,
+          placement: placeRight ? "right" : "left"
         };
       }
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroshot",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",
@@ -9,6 +9,9 @@
     "type": "git",
     "url": "https://github.com/omachala/heroshot"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "publishConfig": {
     "provenance": true,
     "access": "public"
@@ -58,6 +61,18 @@
       "types": "./dist/integrations/react/index.d.ts",
       "import": "./dist/integrations/react/index.js"
     },
+    "./svelte": {
+      "types": "./dist/integrations/svelte/index.d.ts",
+      "import": "./dist/integrations/svelte/index.js"
+    },
+    "./sveltekit": {
+      "types": "./dist/integrations/svelte/index.d.ts",
+      "import": "./dist/integrations/svelte/index.js"
+    },
+    "./next": {
+      "types": "./dist/integrations/next/index.d.ts",
+      "import": "./dist/integrations/next/index.js"
+    },
     "./plugins/vite": {
       "types": "./dist/integrations/shared/vitePlugin.d.ts",
       "import": "./dist/integrations/shared/vitePlugin.js"
@@ -67,6 +82,11 @@
       "import": "./dist/integrations/shared/docusaurusPlugin.js",
       "require": "./dist/integrations/shared/docusaurusPlugin.cjs"
     },
+    "./plugins/next": {
+      "types": "./dist/integrations/shared/nextPlugin.d.ts",
+      "import": "./dist/integrations/shared/nextPlugin.js",
+      "require": "./dist/integrations/shared/nextPlugin.cjs"
+    },
     "./virtual": {
       "types": "./dist/integrations/shared/virtual.d.ts"
     }
@@ -134,6 +154,7 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
+    "svelte": ">=5.0.0",
     "vitepress": ">=1.0.0",
     "vue": ">=3.0.0"
   },
@@ -141,6 +162,9 @@
     "react": {
       "optional": true
     },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     },
@@ -157,6 +181,8 @@
     "build:integrations": "pnpm --filter './integrations/*' build",
     "build:integrations:vue": "pnpm --filter './integrations/vue' build",
     "build:integrations:react": "pnpm --filter './integrations/react' build",
+    "build:integrations:svelte": "pnpm --filter './integrations/svelte' build",
+    "build:integrations:next": "pnpm --filter './integrations/next' build",
     "test:integrations": "pnpm --filter './integrations/*' test:run",
     "lint:integrations": "pnpm --filter './integrations/react' lint",
     "typecheck:integrations": "pnpm --filter './integrations/vue' --filter './integrations/react' typecheck",

package/dist/integrations/shared/getManifest-ClS1WrNU.cjs

@@ -1 +0,0 @@
-"use strict";const s=require("node:fs"),i=require("node:path");function u(o){return o.toLowerCase().replaceAll(/[^a-z0-9]+/g,"-").replaceAll(/(?:^-|-$)/g,"")}function a(o){return o==="light"?["light"]:o==="dark"?["dark"]:["light","dark"]}const f=["heroshot.config.json","heroshots/config.json",".heroshot/config.json"];function l(o){for(const r of f){const t=i.resolve(o,r);if(s.existsSync(t))return t}return null}function h(o){const r=a(o.browser?.colorScheme),t=o.outputFormat??"png",c=o.outputDirectory??"heroshots",n={};for(const e of o.screenshots)n[e.name]={slug:u(e.name),viewports:e.viewports??[],colorSchemes:r,format:t};return{version:1,outputDirectory:c,screenshots:n}}function g(o){try{const r=s.readFileSync(o,"utf-8"),t=JSON.parse(r);return!t.screenshots||!Array.isArray(t.screenshots)?(console.warn("[heroshot] Invalid config: missing screenshots array"),null):h(t)}catch(r){return console.warn("[heroshot] Failed to load config:",r),null}}function d(){return{version:1,outputDirectory:"heroshots",screenshots:{}}}exports.emptyManifest=d;exports.findConfig=l;exports.loadManifest=g;