frameshot-mcp 0.7.0 → 0.9.7

package/dist/renderer.d.ts

@@ -1,7 +1,7 @@
 import { Page } from 'playwright';
 
 type Engine = "chromium" | "firefox" | "webkit";
-type Framework = "html" | "react" | "vue" | "svelte";
+type Framework = "html" | "react" | "vue" | "svelte" | "solid" | "preact";
 type Theme = "light" | "dark";
 interface Viewport {
     width: number;
@@ -90,6 +90,7 @@ interface CatalogEntry {
     width: number;
     height: number;
     consoleErrors: string[];
+    error?: string;
 }
 declare const DEVICE_PRESETS: Record<string, Viewport>;
 declare const EXT_TO_FRAMEWORK: Record<string, Framework>;
@@ -102,15 +103,24 @@ interface ProjectConfig {
     viteConfigPath?: string;
     framework: Framework;
     hasVite: boolean;
+    isNextJs: boolean;
+    pathAliases: Record<string, string>;
 }
 
 declare class BrowserPool {
     private pool;
+    private waiters;
+    private totalPages;
+    private readonly maxPages;
+    constructor(maxConcurrentPages?: number);
     warmup(engines: Engine[]): Promise<void>;
     getPage(engine: Engine): Promise<Page>;
-    setViewport(engine: Engine, viewport: Viewport): Promise<void>;
+    releasePage(engine: Engine, page: Page): void;
+    private acquireSlot;
+    private releaseSlot;
     shutdown(): Promise<void>;
     private getSlot;
+    private createPage;
 }
 
 declare class HtmlBuilder {
@@ -129,7 +139,7 @@ interface DiffComparison {
 }
 declare class ImageComparator {
     diff(imageA: string, imageB: string, threshold?: number): DiffComparison;
-    composite(images: Buffer[], columns: number, labelHeight?: number): {
+    composite(images: Buffer[], columns: number): {
         image: string;
         width: number;
         height: number;
@@ -142,6 +152,8 @@ declare class ProjectDetector {
     private findViteConfig;
     private detectFramework;
     private checkViteAvailable;
+    private checkIsNextJs;
+    private readTsconfigAliases;
 }
 
 declare class SnapshotStore {
@@ -166,12 +178,12 @@ declare class ViteBundler {
         project: ProjectConfig;
     }>;
     shutdown(): Promise<void>;
+    generateEntry(componentPath: string, framework: Framework, props?: Record<string, unknown>, projectRoot?: string): string;
     private ensureServer;
+    private importFrameshotVite;
     private importVite;
     private hasPackage;
-    private generateEntry;
     private findGlobalCss;
-    private getOptimizeDepsInclude;
 }
 
 declare class AuditUseCase {
@@ -226,8 +238,6 @@ declare class RenderUseCase {
     private renderUrl;
     private navigateAndWait;
     private resolveAutoFitViewport;
-    private attachConsoleCapture;
-    private takeScreenshot;
     private resolveOptions;
 }
 

package/dist/renderer.js

@@ -1,10 +1,5 @@
 import {
   AuditUseCase,
-  ScreenshotUseCase,
-  SnapshotStore,
-  SnapshotUseCase
-} from "./chunk-FTYTZW6D.js";
-import {
   BrowserPool,
   CatalogUseCase,
   DEVICE_PRESETS,
@@ -14,8 +9,11 @@ import {
   ImageComparator,
   ProjectDetector,
   RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotStore,
+  SnapshotUseCase,
   ViteBundler
-} from "./chunk-Q7A3DLED.js";
+} from "./chunk-MEBQ7ZWA.js";
 export {
   AuditUseCase,
   BrowserPool,

package/dist/stubs/gatsby.js

@@ -0,0 +1,20 @@
+// Stub for "gatsby" module
+import { createElement } from "react";
+
+export const Link = ({ children, to, ...rest }) =>
+  createElement(
+    "a",
+    { ...rest, href: typeof to === "string" ? to : "#" },
+    children,
+  );
+export const navigate = () => Promise.resolve();
+export const withPrefix = (path) => path;
+export const Slice = ({ children }) => children ?? null;
+export const Script = (props) => createElement("script", props);
+export const graphql = (strings) => strings;
+export const useStaticQuery = () => ({});
+export const StaticQuery = ({ render }) =>
+  typeof render === "function" ? render({}) : null;
+export const PageRenderer = () => null;
+
+export default {};

package/dist/stubs/next-font.js

@@ -0,0 +1,9 @@
+// Stub for next/font/google, next/font/local
+// Returns empty className so layout isn't broken
+const fontStub = () => () => ({ className: "", style: {} });
+export const Inter = fontStub();
+export const Roboto = fontStub();
+export const Open_Sans = fontStub();
+export const Lato = fontStub();
+export const Montserrat = fontStub();
+export default fontStub();

package/dist/stubs/next-headers.js

@@ -0,0 +1,20 @@
+// Stub for next/headers — server-only APIs that must not crash during component preview
+const emptyMap = {
+  get: () => undefined,
+  getAll: () => [],
+  has: () => false,
+  forEach: () => {},
+  entries: () => [][Symbol.iterator](),
+  keys: () => [][Symbol.iterator](),
+  values: () => [][Symbol.iterator](),
+  set: () => {},
+  delete: () => {},
+  toString: () => "",
+};
+export const headers = () => emptyMap;
+export const cookies = () => emptyMap;
+export const draftMode = () => ({
+  isEnabled: false,
+  enable: () => {},
+  disable: () => {},
+});

package/dist/stubs/next-image.js

@@ -0,0 +1,34 @@
+import { createElement } from "react";
+
+export default function Image({
+  src,
+  alt = "",
+  width,
+  height,
+  fill,
+  priority,
+  quality,
+  placeholder,
+  blurDataURL,
+  sizes,
+  style,
+  className,
+  onLoad,
+  onError,
+  ...rest
+}) {
+  const imgStyle = fill
+    ? { position: "absolute", inset: 0, width: "100%", height: "100%" }
+    : {};
+  return createElement("img", {
+    src: typeof src === "object" ? src.src : src,
+    alt,
+    width: fill ? undefined : width,
+    height: fill ? undefined : height,
+    style: { ...imgStyle, ...style },
+    className,
+    onLoad,
+    onError,
+    ...rest,
+  });
+}

package/dist/stubs/next-link.js

@@ -0,0 +1,25 @@
+import { createElement } from "react";
+
+export default function Link({
+  href,
+  children,
+  className,
+  style,
+  onClick,
+  prefetch,
+  replace,
+  scroll,
+  shallow,
+  passHref,
+  locale,
+  legacyBehavior,
+  ...rest
+}) {
+  const finalHref =
+    typeof href === "object" ? (href.pathname ?? "/") : (href ?? "/");
+  return createElement(
+    "a",
+    { href: finalHref, className, style, onClick, ...rest },
+    children,
+  );
+}

package/dist/stubs/next-navigation.js

@@ -0,0 +1,17 @@
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  prefetch: () => {},
+  refresh: () => {},
+  pathname: "/",
+  query: {},
+});
+export const usePathname = () => "/";
+export const useSearchParams = () => new URLSearchParams();
+export const useParams = () => ({});
+export const redirect = () => {};
+export const notFound = () => {};
+export const useSelectedLayoutSegment = () => null;
+export const useSelectedLayoutSegments = () => [];

package/dist/stubs/next-router.js

@@ -0,0 +1,19 @@
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  prefetch: () => {},
+  reload: () => {},
+  query: {},
+  pathname: "/",
+  asPath: "/",
+  basePath: "",
+  locale: undefined,
+  locales: [],
+  defaultLocale: undefined,
+  isReady: true,
+  isPreview: false,
+  events: { on: () => {}, off: () => {}, emit: () => {} },
+});
+export const withRouter = (Component) => Component;

package/dist/stubs/nuxt-app.js

@@ -0,0 +1,37 @@
+// Stub for Nuxt #app
+export const useNuxtApp = () => ({
+  $config: { public: {}, app: {} },
+  $router: { push: () => {}, replace: () => {}, back: () => {} },
+  $route: { path: "/", params: {}, query: {}, hash: "" },
+  provide: () => {},
+  hook: () => {},
+  callHook: () => {},
+  runWithContext: (fn) => fn(),
+});
+export const useRuntimeConfig = () => ({ public: {}, app: {} });
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  go: () => {},
+});
+export const useRoute = () => ({ path: "/", params: {}, query: {}, hash: "" });
+export const navigateTo = () => {};
+export const useHead = () => {};
+export const useSeoMeta = () => {};
+export const useState = (_, init) => ({
+  value: typeof init === "function" ? init() : init,
+});
+export const useFetch = () => ({
+  data: { value: null },
+  error: { value: null },
+  pending: { value: false },
+});
+export const useAsyncData = () => ({
+  data: { value: null },
+  error: { value: null },
+  pending: { value: false },
+});
+export const defineNuxtComponent = (c) => c;
+export const defineNuxtPlugin = () => {};

package/dist/stubs/nuxt-imports.js

@@ -0,0 +1,13 @@
+// Stub for Nuxt auto-imports (#imports)
+
+export {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+} from "vue";
+export * from "./nuxt-app.js";

package/dist/stubs/qwik-city.js

@@ -0,0 +1,33 @@
+// Stub for @builder.io/qwik-city
+// Server-only loaders/actions become no-ops; client APIs return safe defaults.
+export const routeLoader$ = (fn) => () => ({ value: fn?.() });
+export const routeAction$ = () => ({ submit: () => Promise.resolve() });
+export const server$ = (fn) => fn;
+export const useLocation = () => ({
+  url: new URL("http://localhost/"),
+  params: {},
+  query: new URLSearchParams(),
+});
+export const useNavigate = () => () => Promise.resolve();
+export const useContent = () => ({
+  headings: [],
+  menu: undefined,
+});
+export const useDocumentHead = () => ({
+  title: "",
+  meta: [],
+  links: [],
+  styles: [],
+});
+export const Link = ({ children, href, ...rest }) => ({
+  tag: "a",
+  props: { ...rest, href },
+  children,
+});
+export const Form = ({ children, ...rest }) => ({
+  tag: "form",
+  props: rest,
+  children,
+});
+
+export default {};

package/dist/stubs/react-router.js

@@ -0,0 +1,67 @@
+// Stub for react-router / react-router-dom / @remix-run/react
+import { createElement, Fragment } from "react";
+
+// Hooks
+export const useLoaderData = () => ({});
+export const useActionData = () => undefined;
+export const useRouteLoaderData = () => ({});
+export const useNavigation = () => ({
+  state: "idle",
+  location: undefined,
+  formData: undefined,
+  formAction: undefined,
+  formMethod: undefined,
+});
+export const useParams = () => ({});
+export const useSearchParams = () => [new URLSearchParams(), () => {}];
+export const useNavigate = () => () => {};
+export const useSubmit = () => () => {};
+export const useRevalidator = () => ({ revalidate: () => {}, state: "idle" });
+export const useFetcher = () => ({
+  Form: ({ children, ...rest }) => createElement("form", rest, children),
+  submit: () => {},
+  load: () => {},
+  data: undefined,
+  state: "idle",
+});
+export const useMatches = () => [];
+export const useRouteError = () => undefined;
+export const useLocation = () => ({
+  pathname: "/",
+  search: "",
+  hash: "",
+  state: null,
+  key: "default",
+});
+export const isRouteErrorResponse = () => false;
+
+// Components
+export const Form = ({ children, ...rest }) =>
+  createElement("form", rest, children);
+export const Link = ({ children, to, ...rest }) =>
+  createElement(
+    "a",
+    { ...rest, href: typeof to === "string" ? to : "#" },
+    children,
+  );
+export const NavLink = Link;
+export const Outlet = () => null;
+export const Await = ({ children }) =>
+  typeof children === "function" ? children(undefined) : children;
+export const Meta = () => null;
+export const Links = () => null;
+export const Scripts = () => null;
+export const ScrollRestoration = () => null;
+export const Route = ({ children }) => createElement(Fragment, null, children);
+export const Routes = ({ children }) => createElement(Fragment, null, children);
+export const MemoryRouter = ({ children }) =>
+  createElement(Fragment, null, children);
+export const BrowserRouter = MemoryRouter;
+export const Navigate = () => null;
+
+// Server-only helpers — return identity-ish values
+export const json = (data) => data;
+export const redirect = () => ({ status: 302 });
+export const defer = (data) => data;
+
+export default {};

package/dist/stubs/server-only.js

@@ -0,0 +1,2 @@
+// Stub for 'server-only' package — allows client components to be rendered in browser context
+export default {};

package/dist/stubs/solid-router.js

@@ -0,0 +1,27 @@
+// Stub for @solidjs/router (compatible with SolidStart's router re-exports)
+export const useNavigate = () => () => {};
+export const useLocation = () => ({
+  pathname: "/",
+  search: "",
+  hash: "",
+  query: {},
+  state: null,
+});
+export const useParams = () => ({});
+export const useSearchParams = () => [{}, () => {}];
+export const useMatch = () => null;
+export const useResolvedPath = (path) => path;
+export const useIsRouting = () => () => false;
+export const A = (props) => {
+  // Solid uses JSX without runtime; we just return a plain object that
+  // happens to look like a Solid element. In Solid, components are functions
+  // that return DOM. For stubs, we return an h() call equivalent.
+  return props;
+};
+export const Navigate = () => null;
+export const Route = (props) => props;
+export const Router = (props) => props?.children ?? null;
+export const Routes = (props) => props?.children ?? null;
+export const Outlet = () => null;
+
+export default {};

package/dist/stubs/solid-start.js

@@ -0,0 +1,18 @@
+// Stub for @solidjs/start
+// SolidStart server APIs become no-ops/identity for component preview.
+export const createAsync = (fn) => fn;
+export const query = (fn) => fn;
+export const action = (fn) => fn;
+export const cache = (fn) => fn;
+export const revalidate = () => {};
+export const json = (data) => data;
+export const redirect = () => ({ status: 302 });
+export const useRequest = () => ({});
+export const useServerContext = () => ({});
+export const HttpHeader = () => null;
+export const HttpStatusCode = () => null;
+export const FileRoutes = () => null;
+
+export * from "./solid-router.js";
+
+export default {};

package/dist/stubs/stubs/gatsby.js

@@ -0,0 +1,20 @@
+// Stub for "gatsby" module
+import { createElement } from "react";
+
+export const Link = ({ children, to, ...rest }) =>
+  createElement(
+    "a",
+    { ...rest, href: typeof to === "string" ? to : "#" },
+    children,
+  );
+export const navigate = () => Promise.resolve();
+export const withPrefix = (path) => path;
+export const Slice = ({ children }) => children ?? null;
+export const Script = (props) => createElement("script", props);
+export const graphql = (strings) => strings;
+export const useStaticQuery = () => ({});
+export const StaticQuery = ({ render }) =>
+  typeof render === "function" ? render({}) : null;
+export const PageRenderer = () => null;
+
+export default {};

package/dist/stubs/stubs/next-font.js

@@ -0,0 +1,9 @@
+// Stub for next/font/google, next/font/local
+// Returns empty className so layout isn't broken
+const fontStub = () => () => ({ className: "", style: {} });
+export const Inter = fontStub();
+export const Roboto = fontStub();
+export const Open_Sans = fontStub();
+export const Lato = fontStub();
+export const Montserrat = fontStub();
+export default fontStub();

package/dist/stubs/stubs/next-headers.js

@@ -0,0 +1,20 @@
+// Stub for next/headers — server-only APIs that must not crash during component preview
+const emptyMap = {
+  get: () => undefined,
+  getAll: () => [],
+  has: () => false,
+  forEach: () => {},
+  entries: () => [][Symbol.iterator](),
+  keys: () => [][Symbol.iterator](),
+  values: () => [][Symbol.iterator](),
+  set: () => {},
+  delete: () => {},
+  toString: () => "",
+};
+export const headers = () => emptyMap;
+export const cookies = () => emptyMap;
+export const draftMode = () => ({
+  isEnabled: false,
+  enable: () => {},
+  disable: () => {},
+});

package/dist/stubs/stubs/next-image.js

@@ -0,0 +1,34 @@
+import { createElement } from "react";
+
+export default function Image({
+  src,
+  alt = "",
+  width,
+  height,
+  fill,
+  priority,
+  quality,
+  placeholder,
+  blurDataURL,
+  sizes,
+  style,
+  className,
+  onLoad,
+  onError,
+  ...rest
+}) {
+  const imgStyle = fill
+    ? { position: "absolute", inset: 0, width: "100%", height: "100%" }
+    : {};
+  return createElement("img", {
+    src: typeof src === "object" ? src.src : src,
+    alt,
+    width: fill ? undefined : width,
+    height: fill ? undefined : height,
+    style: { ...imgStyle, ...style },
+    className,
+    onLoad,
+    onError,
+    ...rest,
+  });
+}

package/dist/stubs/stubs/next-link.js

@@ -0,0 +1,25 @@
+import { createElement } from "react";
+
+export default function Link({
+  href,
+  children,
+  className,
+  style,
+  onClick,
+  prefetch,
+  replace,
+  scroll,
+  shallow,
+  passHref,
+  locale,
+  legacyBehavior,
+  ...rest
+}) {
+  const finalHref =
+    typeof href === "object" ? (href.pathname ?? "/") : (href ?? "/");
+  return createElement(
+    "a",
+    { href: finalHref, className, style, onClick, ...rest },
+    children,
+  );
+}

package/dist/stubs/stubs/next-navigation.js

@@ -0,0 +1,17 @@
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  prefetch: () => {},
+  refresh: () => {},
+  pathname: "/",
+  query: {},
+});
+export const usePathname = () => "/";
+export const useSearchParams = () => new URLSearchParams();
+export const useParams = () => ({});
+export const redirect = () => {};
+export const notFound = () => {};
+export const useSelectedLayoutSegment = () => null;
+export const useSelectedLayoutSegments = () => [];

package/dist/stubs/stubs/next-router.js

@@ -0,0 +1,19 @@
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  prefetch: () => {},
+  reload: () => {},
+  query: {},
+  pathname: "/",
+  asPath: "/",
+  basePath: "",
+  locale: undefined,
+  locales: [],
+  defaultLocale: undefined,
+  isReady: true,
+  isPreview: false,
+  events: { on: () => {}, off: () => {}, emit: () => {} },
+});
+export const withRouter = (Component) => Component;

package/dist/stubs/stubs/nuxt-app.js

@@ -0,0 +1,37 @@
+// Stub for Nuxt #app
+export const useNuxtApp = () => ({
+  $config: { public: {}, app: {} },
+  $router: { push: () => {}, replace: () => {}, back: () => {} },
+  $route: { path: "/", params: {}, query: {}, hash: "" },
+  provide: () => {},
+  hook: () => {},
+  callHook: () => {},
+  runWithContext: (fn) => fn(),
+});
+export const useRuntimeConfig = () => ({ public: {}, app: {} });
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  back: () => {},
+  forward: () => {},
+  go: () => {},
+});
+export const useRoute = () => ({ path: "/", params: {}, query: {}, hash: "" });
+export const navigateTo = () => {};
+export const useHead = () => {};
+export const useSeoMeta = () => {};
+export const useState = (_, init) => ({
+  value: typeof init === "function" ? init() : init,
+});
+export const useFetch = () => ({
+  data: { value: null },
+  error: { value: null },
+  pending: { value: false },
+});
+export const useAsyncData = () => ({
+  data: { value: null },
+  error: { value: null },
+  pending: { value: false },
+});
+export const defineNuxtComponent = (c) => c;
+export const defineNuxtPlugin = () => {};

package/dist/stubs/stubs/nuxt-imports.js

@@ -0,0 +1,13 @@
+// Stub for Nuxt auto-imports (#imports)
+
+export {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+} from "vue";
+export * from "./nuxt-app.js";