frameshot-mcp 0.8.0 → 0.10.0

package/dist/{chunk-PYWXJZTZ.js → chunk-WACVDBUF.js}

@@ -4,6 +4,31 @@ var __export = (target, 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 {
@@ -78,14 +103,18 @@ var BrowserPool = class {
     const launcher = { chromium, firefox, webkit }[engine];
     let browser;
     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}`
-      );
+      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);
@@ -235,6 +264,7 @@ var SnapshotStore = class {
 // src/infrastructure/project-detector.ts
 import { existsSync, readFileSync } from "fs";
 import { dirname, join, resolve } from "path";
+import { parseTsconfig } from "get-tsconfig";
 var VITE_CONFIG_NAMES = [
   "vite.config.ts",
   "vite.config.js",
@@ -245,9 +275,12 @@ var ProjectDetector = class {
   detect(filePath) {
     const root = this.findProjectRoot(filePath);
     const viteConfigPath = this.findViteConfig(root);
-    const framework = this.detectFramework(root);
+    const pkg = this.readPackageJson(root);
+    const framework = this.detectFramework(pkg);
     const hasVite = this.checkViteAvailable(root);
-    return { root, viteConfigPath, framework, hasVite };
+    const isNextJs = this.checkIsNextJs(pkg);
+    const pathAliases = this.readTsconfigAliases(root);
+    return { root, viteConfigPath, framework, hasVite, isNextJs, pathAliases };
   }
   findProjectRoot(startPath) {
     let dir = dirname(resolve(startPath));
@@ -268,39 +301,616 @@ var ProjectDetector = class {
     }
     return void 0;
   }
-  detectFramework(root) {
+  readPackageJson(root) {
     const pkgPath = join(root, "package.json");
-    if (!existsSync(pkgPath)) return "html";
+    if (!existsSync(pkgPath)) return null;
     try {
-      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
-      const allDeps = {
-        ...pkg.dependencies,
-        ...pkg.devDependencies
-      };
-      if (allDeps.react || allDeps["react-dom"]) return "react";
-      if (allDeps.vue) return "vue";
-      if (allDeps.svelte) return "svelte";
+      return JSON.parse(readFileSync(pkgPath, "utf-8"));
     } catch {
+      return null;
     }
+  }
+  detectFramework(pkg) {
+    if (!pkg) return "html";
+    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";
     return "html";
   }
   checkViteAvailable(root) {
     const vitePkgPath = join(root, "node_modules", "vite", "package.json");
     return existsSync(vitePkgPath);
   }
+  checkIsNextJs(pkg) {
+    if (!pkg) return false;
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    return !!allDeps.next;
+  }
+  readTsconfigAliases(root) {
+    const tscPath = join(root, "tsconfig.json");
+    if (!existsSync(tscPath)) return {};
+    try {
+      const tsconfig = parseTsconfig(tscPath);
+      const paths = tsconfig.compilerOptions?.paths ?? {};
+      const baseUrl = tsconfig.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 existsSync2 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import { createRequire } from "module";
-import { join as join2, resolve as resolve2 } from "path";
+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(join2(options.projectRoot, "package.json")) : this.detector.detect(absPath);
-    if (!project.hasVite) {
+    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`
       );
@@ -312,7 +922,7 @@ var ViteBundler = class {
       options.props,
       project.root
     );
-    const cached = await this.ensureServer(project);
+    const cached = await this.ensureServer(project, adapter);
     cached.currentEntry = entryCode;
     const mod = cached.server.moduleGraph.getModuleById(
       "\0virtual:frameshot-entry"
@@ -332,17 +942,94 @@ var ViteBundler = class {
     }
     this.servers.clear();
   }
-  async ensureServer(project) {
+  // 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 = await this.importVite(project.root);
+    const vite = adapter.useFrameshotVite() ? await this.importFrameshotVite() : await this.importVite(project.root);
     if (!vite) {
-      throw new Error(`Failed to import vite from ${project.root}`);
+      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: project.viteConfigPath ?? false,
+      configFile: adapter.skipProjectConfig() ? false : project.viteConfigPath ?? false,
       server: {
         port: 0,
         strictPort: false,
@@ -350,6 +1037,10 @@ var ViteBundler = class {
         hmr: false
       },
       logLevel: "error",
+      resolve: aliasEntries.length > 0 ? {
+        alias: aliasEntries,
+        dedupe: ["react", "react-dom", "vue", "svelte"]
+      } : void 0,
       plugins: [
         {
           name: "frameshot-virtual",
@@ -396,10 +1087,11 @@ var ViteBundler = class {
               }
             });
           }
-        }
+        },
+        ...adapterPlugins
       ],
       optimizeDeps: {
-        include: this.getOptimizeDepsInclude(project.framework)
+        include: adapter.getOptimizeDeps(project.root)
       }
     });
     await server.listen();
@@ -408,15 +1100,16 @@ var ViteBundler = class {
     const cached = {
       server,
       port,
-      currentEntry: ""
+      currentEntry: "",
+      adapter
     };
     this.servers.set(project.root, cached);
     return cached;
   }
-  async importVite(projectRoot) {
+  async importFrameshotVite() {
     try {
-      const require2 = createRequire(join2(projectRoot, "package.json"));
-      const vitePath = require2.resolve("vite");
+      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;
@@ -432,54 +1125,27 @@ var ViteBundler = class {
     }
     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(join2(projectRoot, "package.json"));
+      const require2 = createRequire(join18(projectRoot, "package.json"));
       require2.resolve(name);
       return true;
     } catch {
       return false;
     }
   }
-  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};
-new Component({ target: document.getElementById("app"), props });
-`;
-      default:
-        return `${cssImport}
-const res = await fetch("${componentPath}");
-const html = await res.text();
-document.getElementById("app").innerHTML = html;
-`;
-    }
-  }
   findGlobalCss(projectRoot) {
     const candidates = [
       "src/index.css",
@@ -491,25 +1157,13 @@ document.getElementById("app").innerHTML = html;
       "app/globals.css"
     ];
     for (const candidate of candidates) {
-      const fullPath = join2(projectRoot, candidate);
-      if (existsSync2(fullPath)) {
+      const fullPath = join18(projectRoot, candidate);
+      if (existsSync4(fullPath)) {
         return `import "${fullPath}";`;
       }
     }
     return "";
   }
-  getOptimizeDepsInclude(framework) {
-    switch (framework) {
-      case "react":
-        return ["react", "react-dom/client"];
-      case "vue":
-        return ["vue"];
-      case "svelte":
-        return [];
-      default:
-        return [];
-    }
-  }
 };
 
 // src/use-cases/audit.ts
@@ -591,34 +1245,9 @@ var AuditUseCase = class {
   }
 };
 
-// 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/use-cases/catalog.ts
 import { readdirSync, statSync } from "fs";
-import { extname, join as join3, relative } from "path";
+import { extname, join as join19, relative } from "path";
 var CatalogUseCase = class {
   constructor(renderUseCase) {
     this.renderUseCase = renderUseCase;
@@ -676,7 +1305,7 @@ var CatalogUseCase = class {
     const entries = readdirSync(dir);
     for (const entry of entries) {
       if (entry.startsWith(".") || entry === "node_modules") continue;
-      const fullPath = join3(dir, entry);
+      const fullPath = join19(dir, entry);
       const stat = statSync(fullPath);
       if (stat.isDirectory() && recursive) {
         files.push(...this.scanDirectory(fullPath, recursive));
@@ -740,10 +1369,11 @@ var DiffUseCase = class {
 };
 
 // src/use-cases/render.ts
-import { readFileSync as readFileSync2 } from "fs";
+import { readFileSync as readFileSync3 } from "fs";
 import { extname as extname2 } from "path";
 
 // src/infrastructure/page-utils.ts
+import picomatch from "picomatch";
 function attachConsoleCapture(page) {
   const errors = [];
   const onMessage = (msg) => {
@@ -760,6 +1390,46 @@ function attachConsoleCapture(page) {
     }
   };
 }
+function normalizeResponse(value) {
+  if (value && typeof value === "object" && "body" in value) {
+    return value;
+  }
+  return { body: value };
+}
+async function attachMocks(page, mocks) {
+  const matchers = Object.entries(mocks).map(([pattern, value]) => ({
+    pattern,
+    isMatch: pattern.startsWith("http") ? (url) => url === pattern : picomatch(pattern, { dot: true }),
+    response: normalizeResponse(value)
+  }));
+  if (matchers.length === 0) return;
+  await page.route("**/*", async (route) => {
+    const url = route.request().url();
+    const pathname = (() => {
+      try {
+        return new URL(url).pathname;
+      } catch {
+        return url;
+      }
+    })();
+    const hit = matchers.find((m) => m.isMatch(url)) ?? matchers.find((m) => m.isMatch(pathname));
+    if (!hit) {
+      await route.continue();
+      return;
+    }
+    const spec = hit.response;
+    const isString = typeof spec.body === "string";
+    const isBinary = spec.body instanceof Uint8Array || spec.body instanceof ArrayBuffer;
+    const body = isString ? spec.body : isBinary ? Buffer.from(spec.body) : JSON.stringify(spec.body ?? null);
+    const contentType = spec.contentType ?? (isString ? "text/plain" : "application/json");
+    await route.fulfill({
+      status: spec.status ?? 200,
+      contentType,
+      body,
+      headers: spec.headers
+    });
+  });
+}
 async function takeScreenshot(page, engine, fullPage, errors, cleanup) {
   const screenshot = await page.screenshot({ type: "png", fullPage });
   const metrics = await page.evaluate(() => ({
@@ -825,7 +1495,7 @@ var RenderUseCase = class {
         );
       }
     }
-    const code = readFileSync2(filePath, "utf-8");
+    const code = readFileSync3(filePath, "utf-8");
     const results = await this.render(code, framework, options);
     return { results, mode: "cdn" };
   }
@@ -944,6 +1614,7 @@ var RenderUseCase = class {
     const page = await this.pool.getPage(engine);
     await page.setViewportSize(options.viewport);
     const { errors, cleanup } = attachConsoleCapture(page);
+    if (options.mock) await attachMocks(page, options.mock);
     await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
     if (options.waitFor > 0) await page.waitForTimeout(options.waitFor);
     const result = await takeScreenshot(
@@ -959,9 +1630,27 @@ var RenderUseCase = class {
   async renderUrl(engine, url, options) {
     const page = await this.pool.getPage(engine);
     const { errors, cleanup } = attachConsoleCapture(page);
+    if (options.mock) await attachMocks(page, options.mock);
     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,
@@ -1106,6 +1795,8 @@ var SnapshotUseCase = class {
 
 export {
   __export,
+  DEVICE_PRESETS,
+  EXT_TO_FRAMEWORK,
   BrowserPool,
   HtmlBuilder,
   ImageComparator,
@@ -1113,8 +1804,6 @@ export {
   ProjectDetector,
   ViteBundler,
   AuditUseCase,
-  DEVICE_PRESETS,
-  EXT_TO_FRAMEWORK,
   CatalogUseCase,
   DiffUseCase,
   RenderUseCase,