frameshot-mcp 0.11.1 → 0.12.0

package/dist/{chunk-SP7UAIQL.js → chunk-J5JI2IC5.js}

@@ -1058,6 +1058,23 @@ document.getElementById("app").innerHTML = html;
     }
     const adapterPlugins = await adapter.getPlugins(project.root);
     const adapterAliases = adapter.getAliases(project.root, STUBS_DIR);
+    const ORM_PACKAGES = [
+      "@prisma/client",
+      "drizzle-orm",
+      "mongoose",
+      "typeorm",
+      "@mikro-orm/core",
+      "sequelize",
+      "knex",
+      "objection",
+      "bookshelf"
+    ];
+    const ormStub = join18(STUBS_DIR, "orm-proxy.js");
+    for (const pkg of ORM_PACKAGES) {
+      if (existsSync4(join18(project.root, "node_modules", ...pkg.split("/")))) {
+        adapterAliases[pkg] = ormStub;
+      }
+    }
     const aliasEntries = [];
     for (const [key, value] of Object.entries(project.pathAliases)) {
       aliasEntries.push({
@@ -1411,7 +1428,7 @@ var DiffUseCase = class {
 };
 
 // src/use-cases/render.ts
-import { readFileSync as readFileSync3 } from "fs";
+import { readFileSync as readFileSync3, writeFileSync } from "fs";
 import { extname as extname2 } from "path";
 
 // src/infrastructure/page-utils.ts
@@ -1510,9 +1527,10 @@ var RenderUseCase = class {
       css: opts.css,
       tailwindVersion: opts.tailwindVersion
     });
-    return Promise.all(
+    const results = await Promise.all(
       opts.engines.map((engine) => this.renderHtml(engine, html, opts))
     );
+    return this.maybeSave(results, opts.outputPath);
   }
   async renderFile(filePath, options = {}) {
     const opts = this.resolveOptions(options);
@@ -1525,10 +1543,10 @@ var RenderUseCase = class {
           props: options.props,
           projectRoot: options.projectRoot
         });
-        const results2 = await Promise.all(
+        const raw2 = await Promise.all(
           opts.engines.map((engine) => this.renderUrl(engine, url, opts))
         );
-        return { results: results2, mode: "vite" };
+        return { results: this.maybeSave(raw2, opts.outputPath), mode: "vite" };
       } catch (err) {
         fallbackReason = err instanceof Error ? err.message : String(err);
         process.stderr.write(
@@ -1540,8 +1558,12 @@ var RenderUseCase = class {
       fallbackReason = "Vite bundler not available";
     }
     const code = readFileSync3(filePath, "utf-8");
-    const results = await this.render(code, extFramework, options);
-    return { results, mode: "cdn", fallbackReason };
+    const raw = await this.render(code, extFramework, options);
+    return {
+      results: this.maybeSave(raw, opts.outputPath),
+      mode: "cdn",
+      fallbackReason
+    };
   }
   async renderInteraction(code, framework, interactions, options = {}) {
     const opts = this.resolveOptions(options);
@@ -1729,6 +1751,19 @@ var RenderUseCase = class {
       height: Math.max(measured.height + AUTO_FIT_PAD * 2, AUTO_FIT_MIN.height)
     };
   }
+  /**
+   * When outputPath is set, write the PNG to disk and replace the inline
+   * base64 with an empty string to keep the MCP response small.
+   */
+  maybeSave(results, outputPath) {
+    if (!outputPath) return results;
+    return results.map((r) => {
+      const filePath = results.length === 1 ? outputPath : outputPath.replace(/\.png$/i, `-${r.engine}.png`);
+      const buf = Buffer.from(r.image, "base64");
+      writeFileSync(filePath, buf);
+      return { ...r, image: "", savedPath: filePath };
+    });
+  }
   resolveOptions(partial) {
     return {
       viewport: partial.viewport ?? DEFAULT_RENDER_OPTIONS.viewport,
@@ -1738,7 +1773,9 @@ var RenderUseCase = class {
       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
+      autoFit: partial.autoFit ?? DEFAULT_RENDER_OPTIONS.autoFit,
+      mock: partial.mock,
+      outputPath: partial.outputPath
     };
   }
 };

package/dist/{chunk-RXVC5ZDW.js → chunk-SPOPEVPM.js}

@@ -10,7 +10,7 @@ import {
   SnapshotStore,
   SnapshotUseCase,
   ViteBundler
-} from "./chunk-SP7UAIQL.js";
+} from "./chunk-J5JI2IC5.js";
 
 // src/use-cases/watch.ts
 import { watch } from "chokidar";

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 import {
   createContainer
-} from "./chunk-RXVC5ZDW.js";
+} from "./chunk-SPOPEVPM.js";
 import {
   EXT_TO_FRAMEWORK
-} from "./chunk-SP7UAIQL.js";
+} from "./chunk-J5JI2IC5.js";
 
 // src/cli.ts
 import { mkdirSync } from "fs";

package/dist/index.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 import {
   createContainer
-} from "./chunk-RXVC5ZDW.js";
+} from "./chunk-SPOPEVPM.js";
 import {
   DEVICE_PRESETS,
   EXT_TO_FRAMEWORK,
   __export
-} from "./chunk-SP7UAIQL.js";
+} from "./chunk-J5JI2IC5.js";
 
 // src/index.ts
 import { execSync } from "child_process";
@@ -14531,6 +14531,9 @@ config(en_default());
 var mockSchema = external_exports.record(external_exports.string(), external_exports.unknown()).optional().describe(
   "Mock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }."
 );
+var outputPathSchema = external_exports.string().optional().describe(
+  "Absolute path to save the PNG (e.g. '/tmp/button.png'). When set, returns a text summary instead of base64 image data \u2014 use this in long agent sessions to avoid context bloat."
+);
 function wrapHandler(handler) {
   return async (args) => {
     try {
@@ -14893,7 +14896,8 @@ function registerRenderFileTools(server2, useCase) {
       projectRoot: external_exports.string().optional().describe(
         "Project root directory override (defaults to auto-detect from file path)"
       ),
-      mock: mockSchema
+      mock: mockSchema,
+      outputPath: outputPathSchema
     },
     wrapHandler(
       async ({
@@ -14904,7 +14908,8 @@ function registerRenderFileTools(server2, useCase) {
         darkMode,
         tailwindVersion,
         projectRoot,
-        mock
+        mock,
+        outputPath
       }) => {
         const start = performance.now();
         const { results, mode, fallbackReason } = await useCase.renderFile(
@@ -14917,7 +14922,8 @@ function registerRenderFileTools(server2, useCase) {
             darkMode,
             tailwindVersion,
             projectRoot,
-            mock
+            mock,
+            outputPath
           }
         );
         const elapsed = Math.round(performance.now() - start);
@@ -14926,19 +14932,29 @@ function registerRenderFileTools(server2, useCase) {
         const fallbackNote = mode === "cdn" && fallbackReason ? `
 \u2139\uFE0F Fell back to CDN pipeline: ${fallbackReason}
    Imports from node_modules may not resolve. To fix: install vite as a devDep and add a minimal vite.config.` : "";
-        const content = results.flatMap((r) => [
-          {
-            type: "image",
-            data: r.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `[${mode}/${framework}] ${r.width}x${r.height} (${elapsed}ms)${r.consoleErrors.length ? `
+        const content = results.flatMap((r) => {
+          if (r.savedPath) {
+            return [
+              {
+                type: "text",
+                text: `\u2713 Saved to ${r.savedPath} (${r.width}\xD7${r.height}, ${elapsed}ms)${fallbackNote}`
+              }
+            ];
+          }
+          return [
+            {
+              type: "image",
+              data: r.image,
+              mimeType: "image/png"
+            },
+            {
+              type: "text",
+              text: `[${mode}/${framework}] ${r.width}x${r.height} (${elapsed}ms)${r.consoleErrors.length ? `
 \u26A0\uFE0F Console errors:
 ${r.consoleErrors.join("\n")}` : ""}${fallbackNote}`
-          }
-        ]);
+            }
+          ];
+        });
         return { content };
       }
     )

package/dist/renderer.d.ts

@@ -30,6 +30,15 @@ interface RenderOptions {
      * }
      */
     mock?: Record<string, unknown>;
+    /**
+     * Write the screenshot to disk instead of returning it inline as base64.
+     * When set, tools return a short text summary ("Saved to /path 400×300 12KB")
+     * instead of the full image data. This prevents large base64 blobs from
+     * filling the LLM's context window in multi-step agent workflows.
+     *
+     * @example outputPath: "/tmp/my-component.png"
+     */
+    outputPath?: string;
 }
 interface ScreenshotResult {
     engine: Engine;
@@ -37,6 +46,8 @@ interface ScreenshotResult {
     width: number;
     height: number;
     consoleErrors: string[];
+    /** Set when outputPath was provided — the image was saved here instead of inline. */
+    savedPath?: string;
 }
 interface DiffResult {
     before: string;
@@ -254,6 +265,11 @@ declare class RenderUseCase {
     private renderUrl;
     private navigateAndWait;
     private resolveAutoFitViewport;
+    /**
+     * When outputPath is set, write the PNG to disk and replace the inline
+     * base64 with an empty string to keep the MCP response small.
+     */
+    private maybeSave;
     private resolveOptions;
 }
 

package/dist/renderer.js

@@ -13,7 +13,7 @@ import {
   SnapshotStore,
   SnapshotUseCase,
   ViteBundler
-} from "./chunk-SP7UAIQL.js";
+} from "./chunk-J5JI2IC5.js";
 export {
   AuditUseCase,
   BrowserPool,

package/dist/stubs/next-headers.js

@@ -1,4 +1,8 @@
-// Stub for next/headers — server-only APIs that must not crash during component preview
+// Stub for next/headers — server-only APIs that must not crash during component preview.
+//
+// Next.js 15 made headers()/cookies() async. We export both sync and async
+// variants so components compiled for either version work.
+
 const emptyMap = {
   get: () => undefined,
   getAll: () => [],
@@ -10,10 +14,23 @@ const emptyMap = {
   set: () => {},
   delete: () => {},
   toString: () => "",
+  toJSON: () => ({}),
+  append: () => {},
+  [Symbol.iterator]: () => [][Symbol.iterator](),
 };
-export const headers = () => emptyMap;
-export const cookies = () => emptyMap;
-export const draftMode = () => ({
+
+// Next.js 15+: headers() and cookies() are async
+export const headers = async () => emptyMap;
+export const cookies = async () => emptyMap;
+
+// Next.js 15 additions
+export const connection = async () => {};
+export const after = (fn) => {
+  if (typeof fn === "function") fn();
+};
+
+// Draft mode
+export const draftMode = async () => ({
   isEnabled: false,
   enable: () => {},
   disable: () => {},

package/dist/stubs/orm-proxy.js

@@ -0,0 +1,66 @@
+/**
+ * Universal stub for server-only ORM/database packages.
+ *
+ * Prisma, Drizzle, Mongoose, TypeORM etc. require a running database and
+ * Node.js-only modules (net, tls, dns) that break in a browser/Vite context.
+ *
+ * This stub returns a Proxy that:
+ * - Returns empty arrays for .findMany(), .find(), .all() style calls
+ * - Returns null for .findFirst(), .findOne() style calls
+ * - Returns the input for .create(), .update(), .save() style calls
+ * - Returns { count: 0 } for .count(), .deleteMany()
+ * - Chains infinitely (every property returns another proxy)
+ * - Never throws — components render in their "empty data" state
+ */
+
+function makeProxy(depth = 0) {
+  if (depth > 8) return undefined; // prevent infinite chain
+  return new Proxy(() => Promise.resolve([]), {
+    get(_, prop) {
+      if (prop === "then") return undefined; // not a thenable
+      if (prop === Symbol.toPrimitive) return () => "[ORM stub]";
+      if (prop === Symbol.iterator) return function* () {};
+      // Common result shapes
+      if (
+        typeof prop === "string" &&
+        /^(findMany|findAll|all|list|getAll|fetchAll)$/.test(prop)
+      )
+        return () => Promise.resolve([]);
+      if (
+        typeof prop === "string" &&
+        /^(findFirst|findOne|findUnique|get|fetch|findById)$/.test(prop)
+      )
+        return () => Promise.resolve(null);
+      if (
+        typeof prop === "string" &&
+        /^(count|countDocuments|estimatedDocumentCount)$/.test(prop)
+      )
+        return () => Promise.resolve(0);
+      if (
+        typeof prop === "string" &&
+        /^(create|insert|save|update|upsert|set)$/.test(prop)
+      )
+        return (data) => Promise.resolve(data ?? {});
+      if (
+        typeof prop === "string" &&
+        /^(delete|deleteMany|remove|destroy)$/.test(prop)
+      )
+        return () => Promise.resolve({ count: 0 });
+      return makeProxy(depth + 1);
+    },
+    apply() {
+      return Promise.resolve([]);
+    },
+    construct() {
+      return makeProxy(depth + 1);
+    },
+  });
+}
+
+// Default export and named exports both return a proxy
+export default makeProxy();
+export const PrismaClient = () => makeProxy();
+export const drizzle = () => makeProxy();
+export const createClient = () => makeProxy();
+export const getConnection = () => makeProxy();
+export const DataSource = () => makeProxy();

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

@@ -1,4 +1,8 @@
-// Stub for next/headers — server-only APIs that must not crash during component preview
+// Stub for next/headers — server-only APIs that must not crash during component preview.
+//
+// Next.js 15 made headers()/cookies() async. We export both sync and async
+// variants so components compiled for either version work.
+
 const emptyMap = {
   get: () => undefined,
   getAll: () => [],
@@ -10,10 +14,23 @@ const emptyMap = {
   set: () => {},
   delete: () => {},
   toString: () => "",
+  toJSON: () => ({}),
+  append: () => {},
+  [Symbol.iterator]: () => [][Symbol.iterator](),
 };
-export const headers = () => emptyMap;
-export const cookies = () => emptyMap;
-export const draftMode = () => ({
+
+// Next.js 15+: headers() and cookies() are async
+export const headers = async () => emptyMap;
+export const cookies = async () => emptyMap;
+
+// Next.js 15 additions
+export const connection = async () => {};
+export const after = (fn) => {
+  if (typeof fn === "function") fn();
+};
+
+// Draft mode
+export const draftMode = async () => ({
   isEnabled: false,
   enable: () => {},
   disable: () => {},

package/dist/stubs/stubs/orm-proxy.js

@@ -0,0 +1,66 @@
+/**
+ * Universal stub for server-only ORM/database packages.
+ *
+ * Prisma, Drizzle, Mongoose, TypeORM etc. require a running database and
+ * Node.js-only modules (net, tls, dns) that break in a browser/Vite context.
+ *
+ * This stub returns a Proxy that:
+ * - Returns empty arrays for .findMany(), .find(), .all() style calls
+ * - Returns null for .findFirst(), .findOne() style calls
+ * - Returns the input for .create(), .update(), .save() style calls
+ * - Returns { count: 0 } for .count(), .deleteMany()
+ * - Chains infinitely (every property returns another proxy)
+ * - Never throws — components render in their "empty data" state
+ */
+
+function makeProxy(depth = 0) {
+  if (depth > 8) return undefined; // prevent infinite chain
+  return new Proxy(() => Promise.resolve([]), {
+    get(_, prop) {
+      if (prop === "then") return undefined; // not a thenable
+      if (prop === Symbol.toPrimitive) return () => "[ORM stub]";
+      if (prop === Symbol.iterator) return function* () {};
+      // Common result shapes
+      if (
+        typeof prop === "string" &&
+        /^(findMany|findAll|all|list|getAll|fetchAll)$/.test(prop)
+      )
+        return () => Promise.resolve([]);
+      if (
+        typeof prop === "string" &&
+        /^(findFirst|findOne|findUnique|get|fetch|findById)$/.test(prop)
+      )
+        return () => Promise.resolve(null);
+      if (
+        typeof prop === "string" &&
+        /^(count|countDocuments|estimatedDocumentCount)$/.test(prop)
+      )
+        return () => Promise.resolve(0);
+      if (
+        typeof prop === "string" &&
+        /^(create|insert|save|update|upsert|set)$/.test(prop)
+      )
+        return (data) => Promise.resolve(data ?? {});
+      if (
+        typeof prop === "string" &&
+        /^(delete|deleteMany|remove|destroy)$/.test(prop)
+      )
+        return () => Promise.resolve({ count: 0 });
+      return makeProxy(depth + 1);
+    },
+    apply() {
+      return Promise.resolve([]);
+    },
+    construct() {
+      return makeProxy(depth + 1);
+    },
+  });
+}
+
+// Default export and named exports both return a proxy
+export default makeProxy();
+export const PrismaClient = () => makeProxy();
+export const drizzle = () => makeProxy();
+export const createClient = () => makeProxy();
+export const getConnection = () => makeProxy();
+export const DataSource = () => makeProxy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frameshot-mcp",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Zero-config visual testing for AI agents. Render project components with full Vite dependency resolution — no stories, no config.",
   "type": "module",
   "main": "dist/index.js",