npm - frameshot-mcp - Versions diffs - 0.7.0 → 0.9.7 - Mend

frameshot-mcp 0.7.0 → 0.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/README.md +83 -69
package/action.yml +114 -16
package/dist/chunk-MEBQ7ZWA.js +1774 -0
package/dist/chunk-VUYZHZBH.js +157 -0
package/dist/cli.js +131 -133
package/dist/index.js +519 -572
package/dist/renderer.d.ts +17 -7
package/dist/renderer.js +4 -6
package/dist/stubs/gatsby.js +20 -0
package/dist/stubs/next-font.js +9 -0
package/dist/stubs/next-headers.js +20 -0
package/dist/stubs/next-image.js +34 -0
package/dist/stubs/next-link.js +25 -0
package/dist/stubs/next-navigation.js +17 -0
package/dist/stubs/next-router.js +19 -0
package/dist/stubs/nuxt-app.js +37 -0
package/dist/stubs/nuxt-imports.js +13 -0
package/dist/stubs/qwik-city.js +33 -0
package/dist/stubs/react-router.js +67 -0
package/dist/stubs/server-only.js +2 -0
package/dist/stubs/solid-router.js +27 -0
package/dist/stubs/solid-start.js +18 -0
package/dist/stubs/stubs/gatsby.js +20 -0
package/dist/stubs/stubs/next-font.js +9 -0
package/dist/stubs/stubs/next-headers.js +20 -0
package/dist/stubs/stubs/next-image.js +34 -0
package/dist/stubs/stubs/next-link.js +25 -0
package/dist/stubs/stubs/next-navigation.js +17 -0
package/dist/stubs/stubs/next-router.js +19 -0
package/dist/stubs/stubs/nuxt-app.js +37 -0
package/dist/stubs/stubs/nuxt-imports.js +13 -0
package/dist/stubs/stubs/qwik-city.js +33 -0
package/dist/stubs/stubs/react-router.js +67 -0
package/dist/stubs/stubs/server-only.js +2 -0
package/dist/stubs/stubs/solid-router.js +27 -0
package/dist/stubs/stubs/solid-start.js +18 -0
package/dist/stubs/stubs/sveltekit-environment.js +5 -0
package/dist/stubs/stubs/sveltekit-navigation.js +11 -0
package/dist/stubs/stubs/sveltekit-stores.js +15 -0
package/dist/stubs/stubs/vike.js +11 -0
package/dist/stubs/sveltekit-environment.js +5 -0
package/dist/stubs/sveltekit-navigation.js +11 -0
package/dist/stubs/sveltekit-stores.js +15 -0
package/dist/stubs/vike.js +11 -0
package/package.json +10 -4
package/scripts/render-changed.mjs +140 -18
package/dist/chunk-3LVWVDET.js +0 -849
package/dist/chunk-47YJG5HR.js +0 -690
package/dist/chunk-67JZQ6OI.js +0 -819
package/dist/chunk-AZCGKIMU.js +0 -850
package/dist/chunk-B3CLIGWU.js +0 -786
package/dist/chunk-C6QSY4WR.js +0 -811
package/dist/chunk-DX54PJKO.js +0 -603
package/dist/chunk-EMCJGIMY.js +0 -984
package/dist/chunk-FQNWGR62.js +0 -849
package/dist/chunk-FTYTZW6D.js +0 -203
package/dist/chunk-JGVKYXY2.js +0 -857
package/dist/chunk-JYPEA4P2.js +0 -846
package/dist/chunk-KHK35HDD.js +0 -855
package/dist/chunk-Q7A3DLED.js +0 -848
package/dist/chunk-SIA6XEHM.js +0 -811
package/dist/chunk-ST35YDI6.js +0 -834
package/dist/chunk-T5OBJK35.js +0 -855
package/dist/chunk-U3GHS7KO.js +0 -837
package/dist/chunk-WS2ASCD6.js +0 -683
package/dist/chunk-WZMHVSUA.js +0 -847
package/dist/chunk-ZZST6K7Y.js +0 -987

package/dist/chunk-MEBQ7ZWA.js ADDED Viewed

@@ -0,0 +1,1774 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+// src/domain/types.ts
+var DEFAULT_RENDER_OPTIONS = {
+  viewport: { width: 1280, height: 800 },
+  engines: ["chromium"],
+  fullPage: true,
+  darkMode: false,
+  css: "",
+  tailwindVersion: "3",
+  waitFor: 0,
+  autoFit: false
+};
+var DEVICE_PRESETS = {
+  mobile: { width: 375, height: 667 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1280, height: 800 }
+};
+var EXT_TO_FRAMEWORK = {
+  ".jsx": "react",
+  ".tsx": "react",
+  ".vue": "vue",
+  ".svelte": "svelte",
+  ".html": "html",
+  ".htm": "html"
+};
+// src/infrastructure/browser-pool.ts
+import { chromium, firefox, webkit } from "playwright";
+var BrowserPool = class {
+  pool = /* @__PURE__ */ new Map();
+  waiters = /* @__PURE__ */ new Map();
+  totalPages = /* @__PURE__ */ new Map();
+  maxPages;
+  constructor(maxConcurrentPages = 4) {
+    this.maxPages = maxConcurrentPages;
+  }
+  async warmup(engines) {
+    await Promise.all(
+      engines.map(async (e) => {
+        const page = await this.getPage(e);
+        this.releasePage(e, page);
+      })
+    );
+  }
+  async getPage(engine) {
+    await this.acquireSlot(engine);
+    const slot = await this.getSlot(engine);
+    const idle = slot.idlePages.pop();
+    if (idle) return idle;
+    return this.createPage(slot.browser);
+  }
+  releasePage(engine, page) {
+    const slot = this.pool.get(engine);
+    if (slot) {
+      slot.idlePages.push(page);
+    } else {
+      page.close().catch(() => {
+      });
+    }
+    this.releaseSlot(engine);
+  }
+  async acquireSlot(engine) {
+    const total = this.totalPages.get(engine) ?? 0;
+    if (total < this.maxPages) {
+      this.totalPages.set(engine, total + 1);
+      return;
+    }
+    return new Promise((resolve3) => {
+      if (!this.waiters.has(engine)) this.waiters.set(engine, []);
+      this.waiters.get(engine)?.push(resolve3);
+    });
+  }
+  releaseSlot(engine) {
+    const waiters = this.waiters.get(engine) ?? [];
+    if (waiters.length > 0) {
+      waiters.shift()?.();
+    } else {
+      const total = this.totalPages.get(engine) ?? 0;
+      this.totalPages.set(engine, Math.max(0, total - 1));
+    }
+  }
+  async shutdown() {
+    for (const slot of this.pool.values()) {
+      for (const page of slot.idlePages) {
+        await page.close().catch(() => {
+        });
+      }
+      await slot.browser.close().catch(() => {
+      });
+    }
+    this.pool.clear();
+  }
+  async getSlot(engine) {
+    const existing = this.pool.get(engine);
+    if (existing?.browser.isConnected()) {
+      return existing;
+    }
+    const launcher = { chromium, firefox, webkit }[engine];
+    let browser;
+    try {
+      browser = await launcher.launch({ headless: true });
+    } catch {
+      try {
+        browser = await launcher.launch({
+          headless: true,
+          ...engine === "chromium" ? { channel: "chrome" } : {}
+        });
+      } catch (_e) {
+        throw new Error(
+          `${engine} is not installed. Run: npx playwright install ${engine}`
+        );
+      }
+    }
+    const slot = { browser, idlePages: [] };
+    this.pool.set(engine, slot);
+    return slot;
+  }
+  async createPage(browser) {
+    const context = await browser.newContext({
+      viewport: { width: 1280, height: 800 },
+      deviceScaleFactor: 2
+    });
+    const page = await context.newPage();
+    await page.setContent(
+      '<html><head><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script></head><body></body></html>',
+      { waitUntil: "networkidle" }
+    );
+    return page;
+  }
+};
+// src/infrastructure/html-builder.ts
+var HtmlBuilder = class {
+  build(code, framework, options) {
+    const { darkMode, css, tailwindVersion } = options;
+    const tailwind = tailwindVersion === "4" ? '<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>' : '<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>';
+    const tailwindConfig = tailwindVersion === "4" ? "" : "<script>tailwind.config={darkMode:'class'}</script>";
+    const customCss = css ? `<style>${css}</style>` : "";
+    const baseStyle = `<style>*{margin:0;box-sizing:border-box}body{padding:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}</style>`;
+    const htmlClass = darkMode ? ' class="dark"' : "";
+    if (framework === "html") {
+      if (code.includes("<html")) return code;
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}${baseStyle}${customCss}</head><body>${code}</body></html>`;
+    }
+    if (framework === "react") {
+      const cleanedCode = code.replace(/['"]use client['"];?\n?/g, "").replace(/['"]use server['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/image['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/link['"];?\n?/g, "");
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+${baseStyle}${customCss}</head><body><div id="root"></div>
+<script type="text/babel">
+const Image = (props) => React.createElement('img', {...props, src: props.src?.src || props.src});
+const Link = ({href, children, ...props}) => React.createElement('a', {href, ...props}, children);
+${cleanedCode}
+const _C = typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:typeof Default!=='undefined'?Default:null;
+if(_C)ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(_C));
+</script></body></html>`;
+    }
+    if (framework === "vue") {
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script>
+const{createApp,ref,reactive,computed,onMounted,watch,watchEffect}=Vue;
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)createApp(_C).mount('#app');
+</script></body></html>`;
+    }
+    if (framework === "svelte") {
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/svelte@4/compiler.cjs"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script type="module">
+import "https://unpkg.com/svelte@4/internal/index.mjs";
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)new _C({target:document.getElementById('app')});
+</script></body></html>`;
+    }
+    return code;
+  }
+};
+// src/infrastructure/image-comparator.ts
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+var ImageComparator = class {
+  diff(imageA, imageB, threshold = 0.1) {
+    const bufA = Buffer.from(imageA, "base64");
+    const bufB = Buffer.from(imageB, "base64");
+    const pngA = PNG.sync.read(bufA);
+    const pngB = PNG.sync.read(bufB);
+    const width = Math.max(pngA.width, pngB.width);
+    const height = Math.max(pngA.height, pngB.height);
+    const normalizedA = new PNG({ width, height });
+    const normalizedB = new PNG({ width, height });
+    PNG.bitblt(pngA, normalizedA, 0, 0, pngA.width, pngA.height, 0, 0);
+    PNG.bitblt(pngB, normalizedB, 0, 0, pngB.width, pngB.height, 0, 0);
+    const diffPng = new PNG({ width, height });
+    const diffPixels = pixelmatch(
+      normalizedA.data,
+      normalizedB.data,
+      diffPng.data,
+      width,
+      height,
+      { threshold }
+    );
+    const totalPixels = width * height;
+    return {
+      diff: PNG.sync.write(diffPng).toString("base64"),
+      diffPixels,
+      totalPixels,
+      diffPercentage: Math.round(diffPixels / totalPixels * 1e4) / 100
+    };
+  }
+  composite(images, columns) {
+    const pngs = images.map((buf) => PNG.sync.read(buf));
+    const cellWidth = Math.max(...pngs.map((p) => p.width));
+    const cellHeight = Math.max(...pngs.map((p) => p.height));
+    const rows = Math.ceil(pngs.length / columns);
+    const gridWidth = cellWidth * columns;
+    const gridHeight = cellHeight * rows;
+    const grid = new PNG({ width: gridWidth, height: gridHeight });
+    grid.data.fill(255);
+    for (let i = 0; i < pngs.length; i++) {
+      const col = i % columns;
+      const row = Math.floor(i / columns);
+      const x = col * cellWidth;
+      const y = row * cellHeight;
+      PNG.bitblt(pngs[i], grid, 0, 0, pngs[i].width, pngs[i].height, x, y);
+    }
+    return {
+      image: PNG.sync.write(grid).toString("base64"),
+      width: gridWidth,
+      height: gridHeight
+    };
+  }
+};
+// src/infrastructure/snapshot-store.ts
+var SnapshotStore = class {
+  store = /* @__PURE__ */ new Map();
+  save(key, image) {
+    this.store.set(key, { image, timestamp: Date.now() });
+  }
+  get(key) {
+    return this.store.get(key);
+  }
+  list() {
+    return Array.from(this.store.entries()).map(([key, val]) => ({
+      key,
+      timestamp: val.timestamp
+    }));
+  }
+};
+// src/infrastructure/project-detector.ts
+import { existsSync, readFileSync } from "fs";
+import { dirname, join, resolve } from "path";
+var VITE_CONFIG_NAMES = [
+  "vite.config.ts",
+  "vite.config.js",
+  "vite.config.mjs",
+  "vite.config.mts"
+];
+var ProjectDetector = class {
+  detect(filePath) {
+    const root = this.findProjectRoot(filePath);
+    const viteConfigPath = this.findViteConfig(root);
+    const framework = this.detectFramework(root);
+    const hasVite = this.checkViteAvailable(root);
+    const isNextJs = this.checkIsNextJs(root);
+    const pathAliases = this.readTsconfigAliases(root);
+    return { root, viteConfigPath, framework, hasVite, isNextJs, pathAliases };
+  }
+  findProjectRoot(startPath) {
+    let dir = dirname(resolve(startPath));
+    while (dir !== dirname(dir)) {
+      if (existsSync(join(dir, "package.json"))) {
+        return dir;
+      }
+      dir = dirname(dir);
+    }
+    return dirname(resolve(startPath));
+  }
+  findViteConfig(root) {
+    for (const name of VITE_CONFIG_NAMES) {
+      const configPath = join(root, name);
+      if (existsSync(configPath)) {
+        return configPath;
+      }
+    }
+    return void 0;
+  }
+  detectFramework(root) {
+    const pkgPath = join(root, "package.json");
+    if (!existsSync(pkgPath)) return "html";
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const allDeps = {
+        ...pkg.dependencies,
+        ...pkg.devDependencies
+      };
+      if (allDeps["solid-js"]) return "solid";
+      if (allDeps.preact) return "preact";
+      if (allDeps.react || allDeps["react-dom"]) return "react";
+      if (allDeps.vue) return "vue";
+      if (allDeps.svelte) return "svelte";
+    } catch {
+    }
+    return "html";
+  }
+  checkViteAvailable(root) {
+    const vitePkgPath = join(root, "node_modules", "vite", "package.json");
+    return existsSync(vitePkgPath);
+  }
+  checkIsNextJs(root) {
+    const pkgPath = join(root, "package.json");
+    if (!existsSync(pkgPath)) return false;
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      return !!allDeps.next;
+    } catch {
+      return false;
+    }
+  }
+  readTsconfigAliases(root) {
+    const tscPath = join(root, "tsconfig.json");
+    if (!existsSync(tscPath)) return {};
+    try {
+      const content = readFileSync(tscPath, "utf-8");
+      const stripped = content.replace(/^\s*\/\/[^\n]*/gm, "");
+      const tsc = JSON.parse(stripped);
+      const paths = tsc.compilerOptions?.paths ?? {};
+      const baseUrl = tsc.compilerOptions?.baseUrl ?? ".";
+      const result = {};
+      for (const [alias, targets] of Object.entries(paths)) {
+        const key = alias.replace(/\/\*$/, "");
+        const target = (targets[0] ?? "").replace(/\/\*$/, "");
+        result[key] = join(root, baseUrl, target);
+      }
+      return result;
+    } catch {
+      return {};
+    }
+  }
+};
+// src/infrastructure/vite-bundler.ts
+import { existsSync as existsSync4 } from "fs";
+import { createRequire } from "module";
+import { dirname as dirname2, join as join18, resolve as resolve2 } from "path";
+import { fileURLToPath } from "url";
+// src/infrastructure/adapters/astro.ts
+import { join as join3 } from "path";
+// src/infrastructure/adapters/helpers.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { join as join2 } from "path";
+function hasDep(pkgPath, names) {
+  if (!existsSync2(pkgPath)) return false;
+  try {
+    const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
+    const all = { ...pkg.dependencies, ...pkg.devDependencies };
+    return names.some((n) => !!all[n]);
+  } catch {
+    return false;
+  }
+}
+function hasInstalled(projectRoot, name) {
+  return existsSync2(join2(projectRoot, "node_modules", ...name.split("/")));
+}
+async function loadPlugin(pkg, fnName) {
+  try {
+    const mod = await import(pkg);
+    const candidate = fnName ? mod[fnName] : mod.default ?? mod;
+    if (typeof candidate === "function") {
+      const result = candidate();
+      return Array.isArray(result) ? result : [result];
+    }
+  } catch {
+    process.stderr.write(`[frameshot] ${pkg} not available
+`);
+  }
+  return [];
+}
+function loadReactPlugin() {
+  return loadPlugin("@vitejs/plugin-react");
+}
+function rscDirectivePlugin() {
+  return {
+    name: "frameshot-rsc-directives",
+    transform(code) {
+      return code.replace(/^['"]use (client|server)['"];?\s*/m, "");
+    }
+  };
+}
+// src/infrastructure/adapters/astro.ts
+var AstroAdapter = class {
+  id = "astro";
+  detect(projectRoot) {
+    return hasDep(join3(projectRoot, "package.json"), ["astro"]);
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return [];
+  }
+  async getPlugins(projectRoot) {
+    const plugins = [];
+    if (hasInstalled(projectRoot, "react"))
+      plugins.push(...await loadReactPlugin());
+    if (hasInstalled(projectRoot, "vue"))
+      plugins.push(...await loadPlugin("@vitejs/plugin-vue"));
+    if (hasInstalled(projectRoot, "svelte"))
+      plugins.push(
+        ...await loadPlugin("@sveltejs/vite-plugin-svelte", "svelte")
+      );
+    if (hasInstalled(projectRoot, "solid-js"))
+      plugins.push(...await loadPlugin("vite-plugin-solid"));
+    return plugins;
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/gatsby.ts
+import { join as join4 } from "path";
+var GatsbyAdapter = class {
+  id = "gatsby";
+  detect(projectRoot) {
+    return hasDep(join4(projectRoot, "package.json"), ["gatsby"]);
+  }
+  getAliases(_root, stubsDir) {
+    return { gatsby: join4(stubsDir, "gatsby.js") };
+  }
+  getOptimizeDeps(_root) {
+    return ["react", "react-dom/client"];
+  }
+  async getPlugins(_root) {
+    return loadReactPlugin();
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/generic.ts
+var GenericAdapter = class {
+  id = "generic";
+  detect() {
+    return true;
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps(projectRoot) {
+    const deps = [];
+    if (hasInstalled(projectRoot, "react"))
+      deps.push("react", "react-dom/client");
+    if (hasInstalled(projectRoot, "vue")) deps.push("vue");
+    if (hasInstalled(projectRoot, "solid-js"))
+      deps.push("solid-js", "solid-js/web");
+    if (hasInstalled(projectRoot, "preact")) deps.push("preact");
+    return deps;
+  }
+  async getPlugins(projectRoot) {
+    const plugins = [];
+    if (hasInstalled(projectRoot, "react"))
+      plugins.push(...await loadReactPlugin());
+    if (hasInstalled(projectRoot, "vue"))
+      plugins.push(...await loadPlugin("@vitejs/plugin-vue"));
+    if (hasInstalled(projectRoot, "svelte"))
+      plugins.push(
+        ...await loadPlugin("@sveltejs/vite-plugin-svelte", "svelte")
+      );
+    if (hasInstalled(projectRoot, "solid-js"))
+      plugins.push(...await loadPlugin("vite-plugin-solid"));
+    if (hasInstalled(projectRoot, "preact"))
+      plugins.push(...await loadPlugin("@preact/preset-vite"));
+    return plugins;
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/lit.ts
+import { join as join5 } from "path";
+var LitAdapter = class {
+  id = "lit";
+  detect(projectRoot) {
+    return hasDep(join5(projectRoot, "package.json"), ["lit", "lit-element"]);
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return ["lit"];
+  }
+  async getPlugins(_root) {
+    return [];
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/next.ts
+import { join as join6 } from "path";
+var NextJsAdapter = class {
+  id = "next";
+  detect(projectRoot) {
+    return hasDep(join6(projectRoot, "package.json"), ["next"]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      "next/navigation": join6(stubsDir, "next-navigation.js"),
+      "next/router": join6(stubsDir, "next-router.js"),
+      "next/image": join6(stubsDir, "next-image.js"),
+      "next/link": join6(stubsDir, "next-link.js"),
+      "next/font/google": join6(stubsDir, "next-font.js"),
+      "next/font/local": join6(stubsDir, "next-font.js"),
+      "next/headers": join6(stubsDir, "next-headers.js"),
+      "server-only": join6(stubsDir, "server-only.js"),
+      "client-only": join6(stubsDir, "server-only.js")
+    };
+  }
+  getOptimizeDeps(projectRoot) {
+    const base = ["react", "react-dom/client"];
+    const optional = [
+      "@mui/material",
+      "@mui/icons-material",
+      "@emotion/react",
+      "@emotion/styled",
+      "@chakra-ui/react",
+      "styled-components"
+    ];
+    return [
+      ...base,
+      ...optional.filter((p) => hasInstalled(projectRoot, p.split("/")[0]))
+    ];
+  }
+  async getPlugins(_root) {
+    return [...await loadReactPlugin(), rscDirectivePlugin()];
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/nuxt.ts
+import { join as join7 } from "path";
+var NuxtAdapter = class {
+  id = "nuxt";
+  detect(projectRoot) {
+    return hasDep(join7(projectRoot, "package.json"), ["nuxt"]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      "#app": join7(stubsDir, "nuxt-app.js"),
+      "#imports": join7(stubsDir, "nuxt-imports.js"),
+      "#head": join7(stubsDir, "nuxt-app.js")
+    };
+  }
+  getOptimizeDeps(_root) {
+    return ["vue"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@vitejs/plugin-vue");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/preact.ts
+import { join as join8 } from "path";
+var PreactAdapter = class {
+  id = "preact";
+  detect(projectRoot) {
+    return hasDep(join8(projectRoot, "package.json"), ["preact"]);
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return ["preact", "preact/hooks"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@preact/preset-vite");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/qwik.ts
+import { join as join9 } from "path";
+var QwikAdapter = class {
+  id = "qwik";
+  detect(projectRoot) {
+    return hasDep(join9(projectRoot, "package.json"), ["@builder.io/qwik"]);
+  }
+  getAliases(_root, stubsDir) {
+    return { "@builder.io/qwik-city": join9(stubsDir, "qwik-city.js") };
+  }
+  getOptimizeDeps(_root) {
+    return ["@builder.io/qwik"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@builder.io/qwik/optimizer", "qwikVite");
+  }
+  useFrameshotVite() {
+    return false;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/react-router.ts
+import { join as join10 } from "path";
+var ReactRouterAdapter = class {
+  id = "react-router";
+  detect(projectRoot) {
+    return hasDep(join10(projectRoot, "package.json"), [
+      "@react-router/dev",
+      "@remix-run/react"
+    ]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      "react-router": join10(stubsDir, "react-router.js"),
+      "react-router-dom": join10(stubsDir, "react-router.js"),
+      "@remix-run/react": join10(stubsDir, "react-router.js")
+    };
+  }
+  getOptimizeDeps(_root) {
+    return ["react", "react-dom/client"];
+  }
+  async getPlugins(_root) {
+    return [...await loadReactPlugin(), rscDirectivePlugin()];
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/solid.ts
+import { join as join11 } from "path";
+var SolidAdapter = class {
+  id = "solid";
+  detect(projectRoot) {
+    return hasDep(join11(projectRoot, "package.json"), ["solid-js"]);
+  }
+  getAliases(_root, stubsDir) {
+    return { "@solidjs/router": join11(stubsDir, "solid-router.js") };
+  }
+  getOptimizeDeps() {
+    return ["solid-js", "solid-js/web"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("vite-plugin-solid");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/solid-start.ts
+import { join as join12 } from "path";
+var SolidStartAdapter = class {
+  id = "solid-start";
+  detect(projectRoot) {
+    return hasDep(join12(projectRoot, "package.json"), ["@solidjs/start"]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      "@solidjs/start": join12(stubsDir, "solid-start.js"),
+      "@solidjs/start/router": join12(stubsDir, "solid-router.js"),
+      "@solidjs/router": join12(stubsDir, "solid-router.js")
+    };
+  }
+  getOptimizeDeps(_root) {
+    return ["solid-js", "solid-js/web"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("vite-plugin-solid");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/svelte.ts
+import { join as join13 } from "path";
+var SvelteAdapter = class {
+  id = "svelte";
+  detect(projectRoot) {
+    return hasDep(join13(projectRoot, "package.json"), ["svelte"]);
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return [];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@sveltejs/vite-plugin-svelte", "svelte");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/sveltekit.ts
+import { join as join14 } from "path";
+var SvelteKitAdapter = class {
+  id = "sveltekit";
+  detect(projectRoot) {
+    return hasDep(join14(projectRoot, "package.json"), ["@sveltejs/kit"]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      "$app/navigation": join14(stubsDir, "sveltekit-navigation.js"),
+      "$app/stores": join14(stubsDir, "sveltekit-stores.js"),
+      "$app/environment": join14(stubsDir, "sveltekit-environment.js")
+    };
+  }
+  getOptimizeDeps(_root) {
+    return [];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@sveltejs/vite-plugin-svelte", "svelte");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/vike.ts
+import { join as join15 } from "path";
+var VikeAdapter = class {
+  id = "vike";
+  detect(projectRoot) {
+    return hasDep(join15(projectRoot, "package.json"), ["vike"]);
+  }
+  getAliases(_root, stubsDir) {
+    return {
+      vike: join15(stubsDir, "vike.js"),
+      "vike/client/router": join15(stubsDir, "vike.js")
+    };
+  }
+  getOptimizeDeps(projectRoot) {
+    const deps = [];
+    if (hasInstalled(projectRoot, "react"))
+      deps.push("react", "react-dom/client");
+    if (hasInstalled(projectRoot, "vue")) deps.push("vue");
+    return deps;
+  }
+  async getPlugins(projectRoot) {
+    const plugins = [];
+    if (hasInstalled(projectRoot, "react"))
+      plugins.push(...await loadReactPlugin());
+    if (hasInstalled(projectRoot, "vue"))
+      plugins.push(...await loadPlugin("@vitejs/plugin-vue"));
+    return plugins;
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/vite-react.ts
+import { existsSync as existsSync3 } from "fs";
+import { join as join16 } from "path";
+var ViteReactAdapter = class {
+  id = "vite-react";
+  detect(projectRoot) {
+    return hasDep(join16(projectRoot, "package.json"), ["react"]) && this.hasViteConfig(projectRoot);
+  }
+  hasViteConfig(root) {
+    return ["vite.config.ts", "vite.config.js", "vite.config.mjs"].some(
+      (n) => existsSync3(join16(root, n))
+    );
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return ["react", "react-dom/client"];
+  }
+  async getPlugins() {
+    return [];
+  }
+  useFrameshotVite() {
+    return false;
+  }
+  skipProjectConfig() {
+    return false;
+  }
+};
+// src/infrastructure/adapters/vue.ts
+import { join as join17 } from "path";
+var VueAdapter = class {
+  id = "vue";
+  detect(projectRoot) {
+    return hasDep(join17(projectRoot, "package.json"), ["vue"]);
+  }
+  getAliases() {
+    return {};
+  }
+  getOptimizeDeps() {
+    return ["vue"];
+  }
+  async getPlugins(_root) {
+    return loadPlugin("@vitejs/plugin-vue");
+  }
+  useFrameshotVite() {
+    return true;
+  }
+  skipProjectConfig() {
+    return true;
+  }
+};
+// src/infrastructure/adapters/registry.ts
+var ADAPTERS = [
+  // Meta-frameworks first — most specific match wins.
+  new NextJsAdapter(),
+  new NuxtAdapter(),
+  new SvelteKitAdapter(),
+  new SolidStartAdapter(),
+  new ReactRouterAdapter(),
+  new GatsbyAdapter(),
+  new QwikAdapter(),
+  new AstroAdapter(),
+  new VikeAdapter(),
+  // Core UI libraries.
+  new VueAdapter(),
+  new SvelteAdapter(),
+  new SolidAdapter(),
+  new PreactAdapter(),
+  new LitAdapter(),
+  new ViteReactAdapter(),
+  // Catch-all.
+  new GenericAdapter()
+];
+function selectAdapter(projectRoot) {
+  for (const adapter of ADAPTERS) {
+    if (adapter.detect(projectRoot)) return adapter;
+  }
+  return new GenericAdapter();
+}
+// src/infrastructure/vite-bundler.ts
+var STUBS_DIR = join18(dirname2(fileURLToPath(import.meta.url)), "stubs");
+var ViteBundler = class {
+  servers = /* @__PURE__ */ new Map();
+  detector = new ProjectDetector();
+  async getUrl(filePath, options = {}) {
+    const absPath = resolve2(filePath);
+    const project = options.projectRoot ? this.detector.detect(join18(options.projectRoot, "package.json")) : this.detector.detect(absPath);
+    const adapter = selectAdapter(project.root);
+    if (!project.hasVite && !adapter.useFrameshotVite()) {
+      throw new Error(
+        `Vite not found in ${project.root}. Install vite: npm install -D vite`
+      );
+    }
+    const framework = options.framework ?? project.framework;
+    const entryCode = this.generateEntry(
+      absPath,
+      framework,
+      options.props,
+      project.root
+    );
+    const cached = await this.ensureServer(project, adapter);
+    cached.currentEntry = entryCode;
+    const mod = cached.server.moduleGraph.getModuleById(
+      "\0virtual:frameshot-entry"
+    );
+    if (mod) {
+      cached.server.moduleGraph.invalidateModule(mod);
+    }
+    return {
+      url: `http://127.0.0.1:${cached.port}/@frameshot/`,
+      project
+    };
+  }
+  async shutdown() {
+    for (const cached of this.servers.values()) {
+      await cached.server.close().catch(() => {
+      });
+    }
+    this.servers.clear();
+  }
+  // Public for testing
+  generateEntry(componentPath, framework, props, projectRoot) {
+    const propsJson = props ? JSON.stringify(props) : "{}";
+    const cssImport = projectRoot ? this.findGlobalCss(projectRoot) : "";
+    switch (framework) {
+      case "react": {
+        const hasRouter = projectRoot && this.hasPackage(projectRoot, "react-router-dom");
+        const routerImport = hasRouter ? `import { MemoryRouter } from "react-router-dom";` : "";
+        const wrap = hasRouter ? (inner) => `createElement(MemoryRouter, null, ${inner})` : (inner) => inner;
+        return `${cssImport}
+import { createElement, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+${routerImport}
+import Component from "${componentPath}";
+const props = ${propsJson};
+const root = createRoot(document.getElementById("app"));
+root.render(${wrap(`createElement(Suspense, { fallback: createElement("div", null, "Loading...") }, createElement(Component, props))`)});
+`;
+      }
+      case "vue":
+        return `${cssImport}
+import { createApp } from "vue";
+import Component from "${componentPath}";
+const props = ${propsJson};
+createApp(Component, props).mount("#app");
+`;
+      case "svelte":
+        return `${cssImport}
+import Component from "${componentPath}";
+const props = ${propsJson};
+const target = document.getElementById("app");
+// Svelte 5 uses mount(); Svelte 4 uses new Component(). Try v5 first.
+try {
+  const svelte = await import("svelte");
+  if (typeof svelte.mount === "function") {
+    svelte.mount(Component, { target, props });
+  } else {
+    new Component({ target, props });
+  }
+} catch {
+  new Component({ target, props });
+}
+`;
+      case "solid":
+        return `${cssImport}
+import { render } from "solid-js/web";
+import Component from "${componentPath}";
+const props = ${propsJson};
+render(() => Component(props), document.getElementById("app"));
+`;
+      case "preact":
+        return `${cssImport}
+import { h, render } from "preact";
+import Component from "${componentPath}";
+const props = ${propsJson};
+render(h(Component, props), document.getElementById("app"));
+`;
+      default:
+        return `${cssImport}
+const res = await fetch("${componentPath}");
+const html = await res.text();
+document.getElementById("app").innerHTML = html;
+`;
+    }
+  }
+  async ensureServer(project, adapter) {
+    const existing = this.servers.get(project.root);
+    if (existing) return existing;
+    const vite = adapter.useFrameshotVite() ? await this.importFrameshotVite() : await this.importVite(project.root);
+    if (!vite) {
+      throw new Error(`Failed to import vite for ${project.root}`);
+    }
+    const adapterPlugins = await adapter.getPlugins(project.root);
+    const adapterAliases = adapter.getAliases(project.root, STUBS_DIR);
+    const aliasEntries = [];
+    for (const [key, value] of Object.entries(project.pathAliases)) {
+      aliasEntries.push({
+        find: new RegExp(`^${key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/`),
+        replacement: `${value}/`
+      });
+    }
+    for (const [key, value] of Object.entries(adapterAliases)) {
+      aliasEntries.push({ find: key, replacement: value });
+    }
+    const self = this;
+    const server = await vite.createServer({
+      root: project.root,
+      configFile: adapter.skipProjectConfig() ? false : project.viteConfigPath ?? false,
+      server: {
+        port: 0,
+        strictPort: false,
+        host: "127.0.0.1",
+        hmr: false
+      },
+      logLevel: "error",
+      resolve: aliasEntries.length > 0 ? {
+        alias: aliasEntries,
+        dedupe: ["react", "react-dom", "vue", "svelte"]
+      } : void 0,
+      plugins: [
+        {
+          name: "frameshot-virtual",
+          resolveId(id) {
+            if (id === "virtual:frameshot-entry")
+              return "\0virtual:frameshot-entry";
+            return null;
+          },
+          load(id) {
+            if (id === "\0virtual:frameshot-entry") {
+              return self.servers.get(project.root)?.currentEntry ?? "";
+            }
+            return null;
+          }
+        },
+        {
+          name: "frameshot-html",
+          configureServer(srv) {
+            srv.middlewares.use((req, res, next) => {
+              if (req.url === "/@frameshot/" || req.url === "/@frameshot") {
+                const html = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+  #app { display: flex; align-items: center; justify-content: center; }
+</style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">import "virtual:frameshot-entry";</script>
+</body>
+</html>`;
+                srv.transformIndexHtml(req.url ?? "/", html).then((transformed) => {
+                  res.statusCode = 200;
+                  res.setHeader("Content-Type", "text/html");
+                  res.end(transformed);
+                }).catch(next);
+              } else {
+                next();
+              }
+            });
+          }
+        },
+        ...adapterPlugins
+      ],
+      optimizeDeps: {
+        include: adapter.getOptimizeDeps(project.root)
+      }
+    });
+    await server.listen();
+    const address = server.httpServer?.address();
+    const port = typeof address === "object" && address ? address.port : 5173;
+    const cached = {
+      server,
+      port,
+      currentEntry: "",
+      adapter
+    };
+    this.servers.set(project.root, cached);
+    return cached;
+  }
+  async importFrameshotVite() {
+    try {
+      const requireFromHere = createRequire(import.meta.url);
+      const vitePath = requireFromHere.resolve("vite");
+      const mod = await import(vitePath);
+      if (mod && typeof mod === "object" && "createServer" in mod) {
+        return mod;
+      }
+    } catch {
+    }
+    try {
+      const mod = await import("vite");
+      if (mod && typeof mod === "object" && "createServer" in mod) {
+        return mod;
+      }
+    } catch {
+    }
+    return null;
+  }
+  async importVite(projectRoot) {
+    try {
+      const require2 = createRequire(join18(projectRoot, "package.json"));
+      const vitePath = require2.resolve("vite");
+      const mod = await import(vitePath);
+      if (mod && typeof mod === "object" && "createServer" in mod) {
+        return mod;
+      }
+    } catch {
+    }
+    return this.importFrameshotVite();
+  }
+  hasPackage(projectRoot, name) {
+    try {
+      const require2 = createRequire(join18(projectRoot, "package.json"));
+      require2.resolve(name);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  findGlobalCss(projectRoot) {
+    const candidates = [
+      "src/index.css",
+      "src/main.css",
+      "src/globals.css",
+      "src/app.css",
+      "src/style.css",
+      "src/styles.css",
+      "app/globals.css"
+    ];
+    for (const candidate of candidates) {
+      const fullPath = join18(projectRoot, candidate);
+      if (existsSync4(fullPath)) {
+        return `import "${fullPath}";`;
+      }
+    }
+    return "";
+  }
+};
+// src/use-cases/audit.ts
+var AuditUseCase = class {
+  constructor(pool, htmlBuilder) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+  }
+  pool;
+  htmlBuilder;
+  async auditA11y(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await page.setViewportSize(viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const axeSource = await import("axe-core").then((m) => m.source);
+    await page.addScriptTag({ content: axeSource });
+    const results = await page.evaluate(() => {
+      return window.axe.run();
+    });
+    this.pool.releasePage("chromium", page);
+    return {
+      violations: results.violations.map(
+        (v) => ({
+          id: v.id,
+          impact: v.impact,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({
+            html: n.html,
+            target: n.target
+          }))
+        })
+      ),
+      passes: results.passes.length,
+      incomplete: results.incomplete.length
+    };
+  }
+  async perfAudit(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await page.setViewportSize(viewport);
+    const start = performance.now();
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const renderTimeMs = Math.round(performance.now() - start);
+    const metrics = await page.evaluate(() => {
+      const all = document.querySelectorAll("*");
+      let maxDepth = 0;
+      for (const el of all) {
+        let depth = 0;
+        let node = el;
+        while (node) {
+          depth++;
+          node = node.parentElement;
+        }
+        if (depth > maxDepth) maxDepth = depth;
+      }
+      return {
+        domElements: all.length,
+        domDepth: maxDepth,
+        scriptCount: document.querySelectorAll("script").length,
+        styleSheetCount: document.styleSheets.length,
+        imageCount: document.querySelectorAll("img").length,
+        totalDomSize: document.documentElement.outerHTML.length
+      };
+    });
+    this.pool.releasePage("chromium", page);
+    return { renderTimeMs, ...metrics };
+  }
+};
+// src/use-cases/catalog.ts
+import { readdirSync, statSync } from "fs";
+import { extname, join as join19, relative } from "path";
+var CatalogUseCase = class {
+  constructor(renderUseCase) {
+    this.renderUseCase = renderUseCase;
+  }
+  renderUseCase;
+  async renderCatalog(directory, options = {}) {
+    const { recursive = false, ...renderOptions } = options;
+    const files = this.scanDirectory(directory, recursive);
+    const results = [];
+    for (const filePath of files) {
+      const relativePath = relative(directory, filePath);
+      const framework = this.detectFramework(filePath);
+      try {
+        const { results: renderResults } = await this.renderUseCase.renderFile(
+          filePath,
+          {
+            ...renderOptions,
+            engines: ["chromium"]
+          }
+        );
+        const result = renderResults[0];
+        results.push({
+          path: relativePath,
+          framework,
+          image: result.image,
+          width: result.width,
+          height: result.height,
+          consoleErrors: result.consoleErrors
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        results.push({
+          path: relativePath,
+          framework,
+          image: "",
+          width: 0,
+          height: 0,
+          consoleErrors: [],
+          error: msg
+        });
+      }
+    }
+    return results;
+  }
+  scanDirectory(dir, recursive) {
+    const componentExtensions = /* @__PURE__ */ new Set([
+      ".jsx",
+      ".tsx",
+      ".vue",
+      ".svelte",
+      ".html",
+      ".htm"
+    ]);
+    const files = [];
+    const entries = readdirSync(dir);
+    for (const entry of entries) {
+      if (entry.startsWith(".") || entry === "node_modules") continue;
+      const fullPath = join19(dir, entry);
+      const stat = statSync(fullPath);
+      if (stat.isDirectory() && recursive) {
+        files.push(...this.scanDirectory(fullPath, recursive));
+      } else if (stat.isFile() && componentExtensions.has(extname(entry).toLowerCase())) {
+        files.push(fullPath);
+      }
+    }
+    return files;
+  }
+  detectFramework(filePath) {
+    return EXT_TO_FRAMEWORK[extname(filePath).toLowerCase()] ?? "react";
+  }
+};
+// src/use-cases/diff.ts
+var DiffUseCase = class {
+  constructor(renderUseCase, imageComparator) {
+    this.renderUseCase = renderUseCase;
+    this.imageComparator = imageComparator;
+  }
+  renderUseCase;
+  imageComparator;
+  async diffComponent(before, after, framework, options = {}) {
+    const [beforeResults, afterResults] = await Promise.all([
+      this.renderUseCase.render(before, framework, {
+        ...options,
+        engines: ["chromium"]
+      }),
+      this.renderUseCase.render(after, framework, {
+        ...options,
+        engines: ["chromium"]
+      })
+    ]);
+    const comparison = this.imageComparator.diff(
+      beforeResults[0].image,
+      afterResults[0].image
+    );
+    return {
+      before: beforeResults[0].image,
+      after: afterResults[0].image,
+      ...comparison
+    };
+  }
+  async diffFromReference(code, framework, referenceImage, options = {}) {
+    const { threshold = 0.1, ...renderOptions } = options;
+    const [renderResult] = await this.renderUseCase.render(code, framework, {
+      ...renderOptions,
+      engines: ["chromium"]
+    });
+    const comparison = this.imageComparator.diff(
+      referenceImage,
+      renderResult.image,
+      threshold
+    );
+    return {
+      rendered: renderResult.image,
+      ...comparison,
+      passed: comparison.diffPercentage === 0
+    };
+  }
+};
+// src/use-cases/render.ts
+import { readFileSync as readFileSync3 } from "fs";
+import { extname as extname2 } from "path";
+// src/infrastructure/page-utils.ts
+function attachConsoleCapture(page) {
+  const errors = [];
+  const onMessage = (msg) => {
+    if (msg.type() === "error") errors.push(msg.text());
+  };
+  const onPageError = (err) => errors.push(err.message);
+  page.on("console", onMessage);
+  page.on("pageerror", onPageError);
+  return {
+    errors,
+    cleanup: () => {
+      page.removeListener("console", onMessage);
+      page.removeListener("pageerror", onPageError);
+    }
+  };
+}
+async function takeScreenshot(page, engine, fullPage, errors, cleanup) {
+  const screenshot = await page.screenshot({ type: "png", fullPage });
+  const metrics = await page.evaluate(() => ({
+    w: document.documentElement.scrollWidth,
+    h: document.documentElement.scrollHeight
+  }));
+  cleanup();
+  return {
+    engine,
+    image: screenshot.toString("base64"),
+    width: metrics.w,
+    height: metrics.h,
+    consoleErrors: errors
+  };
+}
+// src/use-cases/render.ts
+var AUTO_FIT_VIEWPORT = { width: 1600, height: 1200 };
+var AUTO_FIT_PAD = 48;
+var AUTO_FIT_MIN = { width: 160, height: 120 };
+var RenderUseCase = class {
+  constructor(pool, htmlBuilder, imageComparator, viteBundler) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+    this.imageComparator = imageComparator;
+    this.viteBundler = viteBundler;
+  }
+  pool;
+  htmlBuilder;
+  imageComparator;
+  viteBundler;
+  async render(code, framework, options = {}) {
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    return Promise.all(
+      opts.engines.map((engine) => this.renderHtml(engine, html, opts))
+    );
+  }
+  async renderFile(filePath, options = {}) {
+    const opts = this.resolveOptions(options);
+    const ext = extname2(filePath).toLowerCase();
+    const framework = EXT_TO_FRAMEWORK[ext] ?? "react";
+    if (this.viteBundler) {
+      try {
+        const { url } = await this.viteBundler.getUrl(filePath, {
+          props: options.props,
+          framework,
+          projectRoot: options.projectRoot
+        });
+        const results2 = await Promise.all(
+          opts.engines.map((engine) => this.renderUrl(engine, url, opts))
+        );
+        return { results: results2, mode: "vite" };
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        process.stderr.write(
+          `[frameshot] Vite pipeline failed (${msg}), falling back to CDN
+`
+        );
+      }
+    }
+    const code = readFileSync3(filePath, "utf-8");
+    const results = await this.render(code, framework, options);
+    return { results, mode: "cdn" };
+  }
+  async renderInteraction(code, framework, interactions, options = {}) {
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    const page = await this.pool.getPage("chromium");
+    await page.setViewportSize(opts.viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    for (const interaction of interactions) {
+      switch (interaction.action) {
+        case "click":
+          if (interaction.selector) await page.click(interaction.selector);
+          break;
+        case "hover":
+          if (interaction.selector) await page.hover(interaction.selector);
+          break;
+        case "focus":
+          if (interaction.selector) await page.focus(interaction.selector);
+          break;
+        case "type":
+          if (interaction.selector && interaction.value)
+            await page.fill(interaction.selector, interaction.value);
+          break;
+        case "wait":
+          await page.waitForTimeout(interaction.ms ?? 300);
+          break;
+      }
+    }
+    const screenshot = await page.screenshot({ type: "png", fullPage: true });
+    const metrics = await page.evaluate(() => ({
+      w: document.documentElement.scrollWidth,
+      h: document.documentElement.scrollHeight
+    }));
+    this.pool.releasePage("chromium", page);
+    return {
+      image: screenshot.toString("base64"),
+      width: metrics.w,
+      height: metrics.h
+    };
+  }
+  async captureAnimation(code, framework, options = {}) {
+    const { frames = 5, duration = 1e3 } = options;
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    const page = await this.pool.getPage("chromium");
+    await page.setViewportSize(opts.viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const interval = duration / (frames - 1);
+    const results = [];
+    for (let i = 0; i < frames; i++) {
+      if (i > 0) await page.waitForTimeout(interval);
+      const screenshot = await page.screenshot({
+        type: "png",
+        fullPage: false
+      });
+      results.push({
+        timestamp: Math.round(i * interval),
+        image: screenshot.toString("base64")
+      });
+    }
+    this.pool.releasePage("chromium", page);
+    return results;
+  }
+  async renderGrid(cells, framework, options = {}) {
+    const { columns = Math.min(cells.length, 3) } = options;
+    const screenshots = await Promise.all(
+      cells.map(async (cell) => {
+        const [result] = await this.render(cell.code, framework, {
+          ...options,
+          engines: ["chromium"]
+        });
+        return Buffer.from(result.image, "base64");
+      })
+    );
+    const composite = this.imageComparator.composite(screenshots, columns);
+    return { ...composite, cells: cells.length };
+  }
+  async renderMatrix(code, framework, viewports, themes, options = {}) {
+    const combinations = [];
+    for (const viewport of viewports) {
+      for (const theme of themes) {
+        combinations.push({ viewport, theme });
+      }
+    }
+    return Promise.all(
+      combinations.map(async ({ viewport, theme }) => {
+        const [result] = await this.render(code, framework, {
+          ...options,
+          viewport: { width: viewport.width, height: viewport.height },
+          darkMode: theme === "dark",
+          engines: ["chromium"],
+          fullPage: true
+        });
+        return {
+          viewport: viewport.label,
+          theme,
+          image: result.image,
+          width: result.width,
+          height: result.height,
+          consoleErrors: result.consoleErrors
+        };
+      })
+    );
+  }
+  // ─── Private helpers ────────────────────────────────────────────────────────
+  async renderHtml(engine, html, options) {
+    const page = await this.pool.getPage(engine);
+    await page.setViewportSize(options.viewport);
+    const { errors, cleanup } = attachConsoleCapture(page);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    if (options.waitFor > 0) await page.waitForTimeout(options.waitFor);
+    const result = await takeScreenshot(
+      page,
+      engine,
+      options.fullPage,
+      errors,
+      cleanup
+    );
+    this.pool.releasePage(engine, page);
+    return result;
+  }
+  async renderUrl(engine, url, options) {
+    const page = await this.pool.getPage(engine);
+    const { errors, cleanup } = attachConsoleCapture(page);
+    const viewport = options.autoFit ? await this.resolveAutoFitViewport(page, url, options) : options.viewport;
+    await page.setViewportSize(viewport);
+    await this.navigateAndWait(page, url, options.waitFor);
+    const overlayState = await page.evaluate(() => {
+      const overlay = document.querySelector("vite-error-overlay");
+      const app = document.getElementById("app");
+      const hasContent = !!app?.firstElementChild;
+      if (!overlay) return { overlay: null, hasContent };
+      const shadow = overlay.shadowRoot;
+      const messageEl = shadow?.querySelector(".message-body");
+      return {
+        overlay: messageEl?.textContent?.trim() ?? "Vite error overlay",
+        hasContent
+      };
+    }).catch(() => ({ overlay: null, hasContent: false }));
+    if (overlayState.overlay && !overlayState.hasContent) {
+      cleanup();
+      this.pool.releasePage(engine, page);
+      throw new Error(`Vite compilation error: ${overlayState.overlay}`);
+    }
+    const result = await takeScreenshot(
+      page,
+      engine,
+      options.fullPage,
+      errors,
+      cleanup
+    );
+    this.pool.releasePage(engine, page);
+    return result;
+  }
+  async navigateAndWait(page, url, waitFor) {
+    await page.goto(url, { waitUntil: "load", timeout: 15e3 });
+    await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+    });
+    if (waitFor > 0) await page.waitForTimeout(waitFor);
+  }
+  async resolveAutoFitViewport(page, url, options) {
+    await page.setViewportSize(AUTO_FIT_VIEWPORT);
+    await this.navigateAndWait(page, url, options.waitFor);
+    await page.waitForSelector("#app > *", { timeout: 3e3 }).catch(() => {
+    });
+    const measured = await page.evaluate(() => {
+      const child = document.getElementById("app")?.firstElementChild;
+      if (!child) return null;
+      const rect = child.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return null;
+      return { width: Math.ceil(rect.width), height: Math.ceil(rect.height) };
+    });
+    if (!measured) return options.viewport;
+    return {
+      width: Math.max(measured.width + AUTO_FIT_PAD * 2, AUTO_FIT_MIN.width),
+      height: Math.max(measured.height + AUTO_FIT_PAD * 2, AUTO_FIT_MIN.height)
+    };
+  }
+  resolveOptions(partial) {
+    return {
+      viewport: partial.viewport ?? DEFAULT_RENDER_OPTIONS.viewport,
+      engines: partial.engines ?? DEFAULT_RENDER_OPTIONS.engines,
+      fullPage: partial.fullPage ?? DEFAULT_RENDER_OPTIONS.fullPage,
+      darkMode: partial.darkMode ?? DEFAULT_RENDER_OPTIONS.darkMode,
+      css: partial.css ?? DEFAULT_RENDER_OPTIONS.css,
+      tailwindVersion: partial.tailwindVersion ?? DEFAULT_RENDER_OPTIONS.tailwindVersion,
+      waitFor: partial.waitFor ?? DEFAULT_RENDER_OPTIONS.waitFor,
+      autoFit: partial.autoFit ?? DEFAULT_RENDER_OPTIONS.autoFit
+    };
+  }
+};
+// src/use-cases/screenshot.ts
+var ScreenshotUseCase = class {
+  constructor(pool) {
+    this.pool = pool;
+  }
+  pool;
+  async screenshotUrl(url, options = {}) {
+    const engines = options.engines ?? ["chromium"];
+    const { waitForNetworkIdle = true } = options;
+    return Promise.all(
+      engines.map(async (engine) => {
+        const { width = 1280, height = 800 } = options.viewport ?? {};
+        const fullPage = options.fullPage ?? true;
+        const waitFor = options.waitFor ?? 0;
+        const page = await this.pool.getPage(engine);
+        await page.setViewportSize({ width, height });
+        const { errors, cleanup } = attachConsoleCapture(page);
+        await page.goto(url, { waitUntil: "domcontentloaded", timeout: 15e3 });
+        if (waitForNetworkIdle) {
+          await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+          });
+        }
+        if (options.waitForSelector) {
+          await page.waitForSelector(options.waitForSelector, {
+            timeout: 1e4
+          });
+        }
+        if (waitFor > 0) {
+          await page.waitForTimeout(waitFor);
+        }
+        const result = await takeScreenshot(
+          page,
+          engine,
+          fullPage,
+          errors,
+          cleanup
+        );
+        this.pool.releasePage(engine, page);
+        return result;
+      })
+    );
+  }
+  async screenshotUrlWithRetry(url, options = {}) {
+    const { retryCount = 0, ...screenshotOpts } = options;
+    const maxAttempts = retryCount + 1;
+    let lastError;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        if (attempt > 0) {
+          const delay = 300 * 2 ** (attempt - 1);
+          await new Promise((resolve3) => setTimeout(resolve3, delay));
+        }
+        return await this.screenshotUrl(url, screenshotOpts);
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    throw lastError;
+  }
+};
+// src/use-cases/snapshot.ts
+var SnapshotUseCase = class {
+  constructor(store, renderUseCase, diffUseCase) {
+    this.store = store;
+    this.renderUseCase = renderUseCase;
+    this.diffUseCase = diffUseCase;
+  }
+  store;
+  renderUseCase;
+  diffUseCase;
+  async save(key, code, framework, options = {}) {
+    const [result] = await this.renderUseCase.render(code, framework, {
+      ...options,
+      engines: ["chromium"]
+    });
+    this.store.save(key, result.image);
+    return { image: result.image, width: result.width, height: result.height };
+  }
+  async check(key, code, framework, options = {}) {
+    const snapshot = this.store.get(key);
+    if (!snapshot) return null;
+    return this.diffUseCase.diffFromReference(
+      code,
+      framework,
+      snapshot.image,
+      options
+    );
+  }
+  list() {
+    return this.store.list();
+  }
+};
+export {
+  __export,
+  DEVICE_PRESETS,
+  EXT_TO_FRAMEWORK,
+  BrowserPool,
+  HtmlBuilder,
+  ImageComparator,
+  SnapshotStore,
+  ProjectDetector,
+  ViteBundler,
+  AuditUseCase,
+  CatalogUseCase,
+  DiffUseCase,
+  RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotUseCase
+};