frameshot-mcp 0.7.0 → 0.9.7

package/dist/index.js

@@ -1,22 +1,12 @@
 #!/usr/bin/env node
 import {
-  AuditUseCase,
-  ScreenshotUseCase,
-  SnapshotStore,
-  SnapshotUseCase
-} from "./chunk-FTYTZW6D.js";
+  createContainer
+} from "./chunk-VUYZHZBH.js";
 import {
-  BrowserPool,
-  CatalogUseCase,
   DEVICE_PRESETS,
-  DiffUseCase,
   EXT_TO_FRAMEWORK,
-  HtmlBuilder,
-  ImageComparator,
-  RenderUseCase,
-  ViteBundler,
   __export
-} from "./chunk-Q7A3DLED.js";
+} from "./chunk-MEBQ7ZWA.js";
 
 // src/index.ts
 import { execSync } from "child_process";
@@ -14537,6 +14527,25 @@ function date4(params) {
 // node_modules/zod/v4/classic/external.js
 config(en_default());
 
+// src/tools/tool-utils.ts
+function wrapHandler(handler) {
+  return async (args) => {
+    try {
+      return await handler(args);
+    } catch (e) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error: ${e instanceof Error ? e.message : String(e)}`
+          }
+        ],
+        isError: true
+      };
+    }
+  };
+}
+
 // src/tools/audit-tools.ts
 function registerAuditTools(server2, useCase) {
   server2.tool(
@@ -14548,51 +14557,41 @@ function registerAuditTools(server2, useCase) {
       width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
       height: external_exports.number().optional().default(800).describe("Viewport height (px)")
     },
-    async ({ code, framework, width, height }) => {
-      try {
-        const result = await useCase.auditA11y(code, framework, {
-          viewport: { width, height }
-        });
-        if (result.violations.length === 0) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `\u2705 No accessibility violations found. (${result.passes} rules passed, ${result.incomplete} need review)`
-              }
-            ]
-          };
-        }
-        const report = result.violations.map((v) => {
-          const nodes = v.nodes.slice(0, 3).map((n) => `    ${n.target.join(" > ")}
-    ${n.html}`).join("\n");
-          return `[${v.impact?.toUpperCase()}] ${v.id}
-  ${v.description}
-  ${v.helpUrl}
-${nodes}`;
-        }).join("\n\n");
+    wrapHandler(async ({ code, framework, width, height }) => {
+      const result = await useCase.auditA11y(code, framework, {
+        viewport: { width, height }
+      });
+      if (result.violations.length === 0) {
         return {
           content: [
             {
               type: "text",
-              text: `Found ${result.violations.length} accessibility violation(s):
-
-${report}
-
-(${result.passes} rules passed, ${result.incomplete} need review)`
+              text: `\u2705 No accessibility violations found. (${result.passes} rules passed, ${result.incomplete} need review)`
             }
           ]
         };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `A11y audit failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+      const report = result.violations.map((v) => {
+        const nodes = v.nodes.slice(0, 3).map((n) => `    ${n.target.join(" > ")}
+    ${n.html}`).join("\n");
+        return `[${v.impact?.toUpperCase()}] ${v.id}
+  ${v.description}
+  ${v.helpUrl}
+${nodes}`;
+      }).join("\n\n");
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Found ${result.violations.length} accessibility violation(s):
+
+${report}
+
+(${result.passes} rules passed, ${result.incomplete} need review)`
+          }
+        ]
+      };
+    })
   );
   server2.tool(
     "perf_audit",
@@ -14603,33 +14602,23 @@ ${report}
       width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
       height: external_exports.number().optional().default(800).describe("Viewport height (px)")
     },
-    async ({ code, framework, width, height }) => {
-      try {
-        const metrics = await useCase.perfAudit(code, framework, {
-          viewport: { width, height }
-        });
-        const lines = [
-          `\u23F1\uFE0F  Render time: ${metrics.renderTimeMs}ms`,
-          `\u{1F4E6} DOM elements: ${metrics.domElements}`,
-          `\u{1F333} DOM depth: ${metrics.domDepth}`,
-          `\u{1F4DC} Scripts: ${metrics.scriptCount}`,
-          `\u{1F3A8} Stylesheets: ${metrics.styleSheetCount}`,
-          `\u{1F5BC}\uFE0F  Images: ${metrics.imageCount}`,
-          `\u{1F4D0} Total DOM size: ${(metrics.totalDomSize / 1024).toFixed(1)}KB`
-        ];
-        return {
-          content: [{ type: "text", text: lines.join("\n") }]
-        };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Perf audit failed: ${msg}` }
-          ],
-          isError: true
-        };
-      }
-    }
+    wrapHandler(async ({ code, framework, width, height }) => {
+      const metrics = await useCase.perfAudit(code, framework, {
+        viewport: { width, height }
+      });
+      const lines = [
+        `\u23F1\uFE0F  Render time: ${metrics.renderTimeMs}ms`,
+        `\u{1F4E6} DOM elements: ${metrics.domElements}`,
+        `\u{1F333} DOM depth: ${metrics.domDepth}`,
+        `\u{1F4DC} Scripts: ${metrics.scriptCount}`,
+        `\u{1F3A8} Stylesheets: ${metrics.styleSheetCount}`,
+        `\u{1F5BC}\uFE0F  Images: ${metrics.imageCount}`,
+        `\u{1F4D0} Total DOM size: ${(metrics.totalDomSize / 1024).toFixed(1)}KB`
+      ];
+      return {
+        content: [{ type: "text", text: lines.join("\n") }]
+      };
+    })
   );
 }
 
@@ -14646,15 +14635,15 @@ function registerCatalogTools(server2, useCase) {
       darkMode: external_exports.boolean().optional().default(false).describe("Render with dark mode"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({
-      directory,
-      recursive,
-      width,
-      height,
-      darkMode,
-      tailwindVersion
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        directory,
+        recursive,
+        width,
+        height,
+        darkMode,
+        tailwindVersion
+      }) => {
         const results = await useCase.renderCatalog(directory, {
           recursive,
           viewport: { width, height },
@@ -14698,16 +14687,8 @@ function registerCatalogTools(server2, useCase) {
           text: `\u{1F4E6} Component catalog: ${results.length} files from ${directory}`
         });
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Catalog render failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
 }
 
@@ -14723,44 +14704,36 @@ function registerDiffTools(server2, useCase) {
       width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
       height: external_exports.number().optional().default(800).describe("Viewport height (px)")
     },
-    async ({ before, after, framework, width, height }) => {
-      try {
-        const result = await useCase.diffComponent(before, after, framework, {
-          viewport: { width, height }
-        });
-        const content = [
-          {
-            type: "text",
-            text: `Visual diff: ${result.diffPercentage}% pixels changed (${result.diffPixels}/${result.totalPixels})`
-          },
-          { type: "text", text: "Before:" },
-          {
-            type: "image",
-            data: result.before,
-            mimeType: "image/png"
-          },
-          { type: "text", text: "After:" },
-          {
-            type: "image",
-            data: result.after,
-            mimeType: "image/png"
-          },
-          { type: "text", text: "Diff (red = changed pixels):" },
-          {
-            type: "image",
-            data: result.diff,
-            mimeType: "image/png"
-          }
-        ];
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [{ type: "text", text: `Diff failed: ${msg}` }],
-          isError: true
-        };
-      }
-    }
+    wrapHandler(async ({ before, after, framework, width, height }) => {
+      const result = await useCase.diffComponent(before, after, framework, {
+        viewport: { width, height }
+      });
+      const content = [
+        {
+          type: "text",
+          text: `Visual diff: ${result.diffPercentage}% pixels changed (${result.diffPixels}/${result.totalPixels})`
+        },
+        { type: "text", text: "Before:" },
+        {
+          type: "image",
+          data: result.before,
+          mimeType: "image/png"
+        },
+        { type: "text", text: "After:" },
+        {
+          type: "image",
+          data: result.after,
+          mimeType: "image/png"
+        },
+        { type: "text", text: "Diff (red = changed pixels):" },
+        {
+          type: "image",
+          data: result.diff,
+          mimeType: "image/png"
+        }
+      ];
+      return { content };
+    })
   );
   server2.tool(
     "diff_reference",
@@ -14777,17 +14750,17 @@ function registerDiffTools(server2, useCase) {
       darkMode: external_exports.boolean().optional().default(false).describe("Render with dark mode"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({
-      code,
-      framework,
-      referenceImage,
-      width,
-      height,
-      threshold,
-      darkMode,
-      tailwindVersion
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        code,
+        framework,
+        referenceImage,
+        width,
+        height,
+        threshold,
+        darkMode,
+        tailwindVersion
+      }) => {
         const result = await useCase.diffFromReference(
           code,
           framework,
@@ -14819,22 +14792,91 @@ function registerDiffTools(server2, useCase) {
           }
         ];
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Reference diff failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
 }
 
-// src/tools/render-tools.ts
+// src/tools/render-animation-tools.ts
+function registerRenderAnimationTools(server2, useCase) {
+  server2.tool(
+    "capture_animation",
+    "Capture multiple frames of a CSS animation or transition over time. Returns sequential screenshots to verify animation behavior, timing, and smoothness.",
+    {
+      code: external_exports.string().describe("Component code with CSS animations/transitions"),
+      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework: html, react, vue, or svelte"),
+      frames: external_exports.number().optional().default(5).describe("Number of frames to capture"),
+      duration: external_exports.number().optional().default(1e3).describe("Total capture duration in ms"),
+      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
+      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
+    },
+    wrapHandler(
+      async ({ code, framework, frames, duration: duration3, width, height }) => {
+        const results = await useCase.captureAnimation(code, framework, {
+          frames,
+          duration: duration3,
+          viewport: { width, height }
+        });
+        const content = results.flatMap((r) => [
+          {
+            type: "image",
+            data: r.image,
+            mimeType: "image/png"
+          },
+          {
+            type: "text",
+            text: `[${r.timestamp}ms]`
+          }
+        ]);
+        return { content };
+      }
+    )
+  );
+  server2.tool(
+    "render_interaction",
+    "Render a component, simulate user interactions (click, hover, focus, type), then screenshot the result. Use this to verify hover states, dropdowns, modals, form inputs.",
+    {
+      code: external_exports.string().describe("Component code to render"),
+      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework"),
+      interactions: external_exports.array(
+        external_exports.object({
+          action: external_exports.enum(["click", "hover", "focus", "type", "wait"]).describe("Interaction type"),
+          selector: external_exports.string().optional().describe("CSS selector for the target element"),
+          value: external_exports.string().optional().describe("Text to type (for 'type' action)"),
+          ms: external_exports.number().optional().describe("Wait duration in ms (for 'wait' action)")
+        })
+      ).describe("Sequence of interactions to perform"),
+      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
+      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
+    },
+    wrapHandler(async ({ code, framework, interactions, width, height }) => {
+      const result = await useCase.renderInteraction(
+        code,
+        framework,
+        interactions,
+        {
+          viewport: { width, height }
+        }
+      );
+      const content = [
+        {
+          type: "image",
+          data: result.image,
+          mimeType: "image/png"
+        },
+        {
+          type: "text",
+          text: `After ${interactions.length} interaction(s) \u2014 ${result.width}x${result.height}`
+        }
+      ];
+      return { content };
+    })
+  );
+}
+
+// src/tools/render-file-tools.ts
 import { extname } from "path";
-function registerRenderTools(server2, useCase) {
+function registerRenderFileTools(server2, useCase) {
   server2.tool(
     "render_file",
     "Render a component file with full dependency resolution. Uses your project's Vite config to resolve imports, path aliases, CSS modules, and node_modules. Falls back to CDN-based rendering if Vite is unavailable. Auto-detects framework from file extension.",
@@ -14849,16 +14891,16 @@ function registerRenderTools(server2, useCase) {
         "Project root directory override (defaults to auto-detect from file path)"
       )
     },
-    async ({
-      path,
-      props,
-      width,
-      height,
-      darkMode,
-      tailwindVersion,
-      projectRoot
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        path,
+        props,
+        width,
+        height,
+        darkMode,
+        tailwindVersion,
+        projectRoot
+      }) => {
         const start = performance.now();
         const { results, mode } = await useCase.renderFile(path, {
           props,
@@ -14886,16 +14928,8 @@ ${r.consoleErrors.join("\n")}` : ""}`
           }
         ]);
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `File render failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
   server2.tool(
     "render_component",
@@ -14916,19 +14950,19 @@ ${r.consoleErrors.join("\n")}` : ""}`
       css: external_exports.string().optional().describe("Custom CSS to inject (design tokens, variables, etc)"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({
-      code,
-      framework,
-      engines,
-      width,
-      height,
-      fullPage,
-      darkMode,
-      colorSchemes,
-      css,
-      tailwindVersion
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        code,
+        framework,
+        engines,
+        width,
+        height,
+        fullPage,
+        darkMode,
+        colorSchemes,
+        css,
+        tailwindVersion
+      }) => {
         const start = performance.now();
         const schemes = colorSchemes ?? (darkMode ? ["dark"] : ["light"]);
         const allResults = await Promise.all(
@@ -14959,15 +14993,19 @@ ${r.consoleErrors.join("\n")}` : ""}`
           }
         ]);
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [{ type: "text", text: `Render failed: ${msg}` }],
-          isError: true
-        };
       }
-    }
+    )
   );
+}
+
+// src/tools/render-visual-tools.ts
+function imageTextContent(image, text) {
+  return [
+    { type: "image", data: image, mimeType: "image/png" },
+    { type: "text", text }
+  ];
+}
+function registerRenderVisualTools(server2, useCase) {
   server2.tool(
     "render_responsive",
     "Render a component at mobile, tablet, and desktop sizes in one call. Returns 3 screenshots for responsive verification.",
@@ -14976,44 +15014,70 @@ ${r.consoleErrors.join("\n")}` : ""}`
       framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework: html, react, vue, or svelte"),
       devices: external_exports.array(external_exports.enum(["mobile", "tablet", "desktop"])).optional().default(["mobile", "tablet", "desktop"]).describe("Device sizes to render")
     },
-    async ({ code, framework, devices }) => {
-      try {
-        const results = await Promise.all(
-          devices.map(async (device) => {
-            const preset = DEVICE_PRESETS[device];
-            const [result] = await useCase.render(code, framework, {
-              viewport: { width: preset.width, height: preset.height },
-              fullPage: true,
-              engines: ["chromium"]
-            });
-            return { device, ...result };
-          })
-        );
-        const content = results.flatMap((r) => [
-          {
-            type: "image",
-            data: r.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `[${r.device}] ${r.width}x${r.height}`
-          }
-        ]);
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Responsive render failed: ${msg}`
-            }
-          ],
-          isError: true
-        };
-      }
-    }
+    wrapHandler(async ({ code, framework, devices }) => {
+      const results = await Promise.all(
+        devices.map(async (device) => {
+          const preset = DEVICE_PRESETS[device];
+          const [result] = await useCase.render(code, framework, {
+            viewport: { width: preset.width, height: preset.height },
+            fullPage: true,
+            engines: ["chromium"]
+          });
+          return { device, ...result };
+        })
+      );
+      const content = results.flatMap(
+        (r) => imageTextContent(r.image, `[${r.device}] ${r.width}x${r.height}`)
+      );
+      return { content };
+    })
+  );
+  server2.tool(
+    "render_theme",
+    "Render a component in both light and dark mode side-by-side. Returns 2 labeled screenshots for quick theme verification.",
+    {
+      code: external_exports.string().describe("Component code to render"),
+      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework"),
+      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
+      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
+    },
+    wrapHandler(async ({ code, framework, width, height }) => {
+      const start = performance.now();
+      const [lightResults, darkResults] = await Promise.all([
+        useCase.render(code, framework, {
+          viewport: { width, height },
+          fullPage: true,
+          engines: ["chromium"],
+          darkMode: false
+        }),
+        useCase.render(code, framework, {
+          viewport: { width, height },
+          fullPage: true,
+          engines: ["chromium"],
+          darkMode: true
+        })
+      ]);
+      const elapsed = Math.round(performance.now() - start);
+      const content = [
+        { type: "text", text: "\u2600\uFE0F Light mode:" },
+        {
+          type: "image",
+          data: lightResults[0].image,
+          mimeType: "image/png"
+        },
+        { type: "text", text: "\u{1F319} Dark mode:" },
+        {
+          type: "image",
+          data: darkResults[0].image,
+          mimeType: "image/png"
+        },
+        {
+          type: "text",
+          text: `${lightResults[0].width}x${lightResults[0].height} (${elapsed}ms)`
+        }
+      ];
+      return { content };
+    })
   );
   server2.tool(
     "render_variants",
@@ -15030,110 +15094,35 @@ ${r.consoleErrors.join("\n")}` : ""}`
       width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
       height: external_exports.number().optional().default(800).describe("Viewport height (px)")
     },
-    async ({ code, variants, framework, width, height }) => {
-      try {
-        const results = await Promise.all(
-          variants.map(async (variant) => {
-            const wrappedCode = framework === "react" ? `${code}
+    wrapHandler(async ({ code, variants, framework, width, height }) => {
+      const results = await Promise.all(
+        variants.map(async (variant) => {
+          const wrappedCode = framework === "react" ? `${code}
 const _VARIANT_PROPS = ${variant.props};
 function _VariantWrapper() { return <App {..._VARIANT_PROPS} />; }` : code;
-            const renderFramework = framework;
-            const overrideCode = framework === "react" ? wrappedCode.replace(
-              /const _C = typeof App/,
-              "const _C = typeof _VariantWrapper!=='undefined'?_VariantWrapper:typeof App"
-            ) : wrappedCode;
-            const [result] = await useCase.render(
-              overrideCode,
-              renderFramework,
-              {
-                viewport: { width, height },
-                fullPage: true,
-                engines: ["chromium"]
-              }
-            );
-            return { label: variant.label, ...result };
-          })
-        );
-        const content = results.flatMap((r) => [
-          {
-            type: "image",
-            data: r.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `[${r.label}] ${r.width}x${r.height}${r.consoleErrors.length ? `
+          const renderFramework = framework;
+          const overrideCode = framework === "react" ? wrappedCode.replace(
+            /const _C = typeof App/,
+            "const _C = typeof _VariantWrapper!=='undefined'?_VariantWrapper:typeof App"
+          ) : wrappedCode;
+          const [result] = await useCase.render(overrideCode, renderFramework, {
+            viewport: { width, height },
+            fullPage: true,
+            engines: ["chromium"]
+          });
+          return { label: variant.label, ...result };
+        })
+      );
+      const content = results.flatMap(
+        (r) => imageTextContent(
+          r.image,
+          `[${r.label}] ${r.width}x${r.height}${r.consoleErrors.length ? `
 \u26A0\uFE0F Console errors:
 ${r.consoleErrors.join("\n")}` : ""}`
-          }
-        ]);
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Variants render failed: ${msg}`
-            }
-          ],
-          isError: true
-        };
-      }
-    }
-  );
-  server2.tool(
-    "render_interaction",
-    "Render a component, simulate user interactions (click, hover, focus, type), then screenshot the result. Use this to verify hover states, dropdowns, modals, form inputs.",
-    {
-      code: external_exports.string().describe("Component code to render"),
-      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework"),
-      interactions: external_exports.array(
-        external_exports.object({
-          action: external_exports.enum(["click", "hover", "focus", "type", "wait"]).describe("Interaction type"),
-          selector: external_exports.string().optional().describe("CSS selector for the target element"),
-          value: external_exports.string().optional().describe("Text to type (for 'type' action)"),
-          ms: external_exports.number().optional().describe("Wait duration in ms (for 'wait' action)")
-        })
-      ).describe("Sequence of interactions to perform"),
-      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
-      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
-    },
-    async ({ code, framework, interactions, width, height }) => {
-      try {
-        const result = await useCase.renderInteraction(
-          code,
-          framework,
-          interactions,
-          {
-            viewport: { width, height }
-          }
-        );
-        const content = [
-          {
-            type: "image",
-            data: result.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `After ${interactions.length} interaction(s) \u2014 ${result.width}x${result.height}`
-          }
-        ];
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Interaction render failed: ${msg}`
-            }
-          ],
-          isError: true
-        };
-      }
-    }
+        )
+      );
+      return { content };
+    })
   );
   server2.tool(
     "render_grid",
@@ -15150,91 +15139,19 @@ ${r.consoleErrors.join("\n")}` : ""}`
       cellWidth: external_exports.number().optional().default(400).describe("Width of each cell (px)"),
       cellHeight: external_exports.number().optional().default(300).describe("Height of each cell (px)")
     },
-    async ({ cells, framework, columns, cellWidth, cellHeight }) => {
-      try {
+    wrapHandler(
+      async ({ cells, framework, columns, cellWidth, cellHeight }) => {
         const result = await useCase.renderGrid(cells, framework, {
           columns,
           viewport: { width: cellWidth, height: cellHeight }
         });
-        const content = [
-          {
-            type: "image",
-            data: result.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `Grid: ${result.cells} cells, ${columns} columns \u2014 ${result.width}x${result.height}`
-          }
-        ];
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Grid render failed: ${msg}` }
-          ],
-          isError: true
-        };
-      }
-    }
-  );
-  server2.tool(
-    "render_theme",
-    "Render a component in both light and dark mode side-by-side. Returns 2 labeled screenshots for quick theme verification.",
-    {
-      code: external_exports.string().describe("Component code to render"),
-      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework"),
-      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
-      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
-    },
-    async ({ code, framework, width, height }) => {
-      try {
-        const start = performance.now();
-        const [lightResults, darkResults] = await Promise.all([
-          useCase.render(code, framework, {
-            viewport: { width, height },
-            fullPage: true,
-            engines: ["chromium"],
-            darkMode: false
-          }),
-          useCase.render(code, framework, {
-            viewport: { width, height },
-            fullPage: true,
-            engines: ["chromium"],
-            darkMode: true
-          })
-        ]);
-        const elapsed = Math.round(performance.now() - start);
-        const content = [
-          { type: "text", text: "\u2600\uFE0F Light mode:" },
-          {
-            type: "image",
-            data: lightResults[0].image,
-            mimeType: "image/png"
-          },
-          { type: "text", text: "\u{1F319} Dark mode:" },
-          {
-            type: "image",
-            data: darkResults[0].image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `${lightResults[0].width}x${lightResults[0].height} (${elapsed}ms)`
-          }
-        ];
+        const content = imageTextContent(
+          result.image,
+          `Grid: ${result.cells} cells, ${columns} columns \u2014 ${result.width}x${result.height}`
+        );
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Theme render failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
   server2.tool(
     "render_matrix",
@@ -15257,8 +15174,8 @@ ${r.consoleErrors.join("\n")}` : ""}`
       css: external_exports.string().optional().describe("Custom CSS to inject (design tokens, variables, etc)"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({ code, framework, viewports, themes, css, tailwindVersion }) => {
-      try {
+    wrapHandler(
+      async ({ code, framework, viewports, themes, css, tailwindVersion }) => {
         const start = performance.now();
         const resolvedViewports = viewports.map((v) => {
           if (typeof v === "string") {
@@ -15282,81 +15199,31 @@ ${r.consoleErrors.join("\n")}` : ""}`
           }
         );
         const elapsed = Math.round(performance.now() - start);
-        const content = results.flatMap((r) => [
-          {
-            type: "image",
-            data: r.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `[${r.viewport}/${r.theme}] ${r.width}x${r.height}${r.consoleErrors.length ? `
+        const content = results.flatMap(
+          (r) => imageTextContent(
+            r.image,
+            `[${r.viewport}/${r.theme}] ${r.width}x${r.height}${r.consoleErrors.length ? `
 \u26A0\uFE0F Console errors:
 ${r.consoleErrors.join("\n")}` : ""}`
-          }
-        ]);
+          )
+        );
         content.push({
           type: "text",
           text: `Matrix: ${resolvedViewports.length} viewports x ${themes.length} themes = ${results.length} renders (${elapsed}ms)`
         });
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Matrix render failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
-  );
-  server2.tool(
-    "capture_animation",
-    "Capture multiple frames of a CSS animation or transition over time. Returns sequential screenshots to verify animation behavior, timing, and smoothness.",
-    {
-      code: external_exports.string().describe("Component code with CSS animations/transitions"),
-      framework: external_exports.enum(["html", "react", "vue", "svelte"]).default("react").describe("Framework: html, react, vue, or svelte"),
-      frames: external_exports.number().optional().default(5).describe("Number of frames to capture"),
-      duration: external_exports.number().optional().default(1e3).describe("Total capture duration in ms"),
-      width: external_exports.number().optional().default(1280).describe("Viewport width (px)"),
-      height: external_exports.number().optional().default(800).describe("Viewport height (px)")
-    },
-    async ({ code, framework, frames, duration: duration3, width, height }) => {
-      try {
-        const results = await useCase.captureAnimation(code, framework, {
-          frames,
-          duration: duration3,
-          viewport: { width, height }
-        });
-        const content = results.flatMap((r) => [
-          {
-            type: "image",
-            data: r.image,
-            mimeType: "image/png"
-          },
-          {
-            type: "text",
-            text: `[${r.timestamp}ms]`
-          }
-        ]);
-        return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Animation capture failed: ${msg}`
-            }
-          ],
-          isError: true
-        };
-      }
-    }
+    )
   );
 }
 
+// src/tools/render-tools.ts
+function registerRenderTools(server2, useCase) {
+  registerRenderFileTools(server2, useCase);
+  registerRenderVisualTools(server2, useCase);
+  registerRenderAnimationTools(server2, useCase);
+}
+
 // src/tools/screenshot-tools.ts
 function registerScreenshotTools(server2, useCase) {
   server2.tool(
@@ -15376,17 +15243,17 @@ function registerScreenshotTools(server2, useCase) {
         "Number of retries with exponential backoff (300ms, 600ms, 1200ms...) if the page fails to load"
       )
     },
-    async ({
-      url: url2,
-      engines,
-      width,
-      height,
-      fullPage,
-      waitForSelector,
-      waitForNetworkIdle,
-      retryOnError
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        url: url2,
+        engines,
+        width,
+        height,
+        fullPage,
+        waitForSelector,
+        waitForNetworkIdle,
+        retryOnError
+      }) => {
         const results = await useCase.screenshotUrlWithRetry(url2, {
           viewport: { width, height },
           engines,
@@ -15409,20 +15276,8 @@ ${r.consoleErrors.join("\n")}` : ""}`
           }
         ]);
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        const retryInfo = retryOnError > 0 ? ` (after ${retryOnError + 1} attempts)` : "";
-        return {
-          content: [
-            {
-              type: "text",
-              text: `Screenshot failed${retryInfo}: ${msg}`
-            }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
 }
 
@@ -15442,16 +15297,16 @@ function registerSnapshotTools(server2, useCase) {
       darkMode: external_exports.boolean().optional().default(false).describe("Render with dark mode"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({
-      name,
-      code,
-      framework,
-      width,
-      height,
-      darkMode,
-      tailwindVersion
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        name,
+        code,
+        framework,
+        width,
+        height,
+        darkMode,
+        tailwindVersion
+      }) => {
         const result = await useCase.save(name, code, framework, {
           viewport: { width, height },
           darkMode,
@@ -15470,16 +15325,8 @@ function registerSnapshotTools(server2, useCase) {
             }
           ]
         };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Snapshot save failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
   server2.tool(
     "snapshot_check",
@@ -15493,16 +15340,16 @@ function registerSnapshotTools(server2, useCase) {
       darkMode: external_exports.boolean().optional().default(false).describe("Render with dark mode"),
       tailwindVersion: external_exports.enum(["3", "4"]).optional().default("3").describe("Tailwind CSS version (3 or 4)")
     },
-    async ({
-      name,
-      code,
-      framework,
-      width,
-      height,
-      darkMode,
-      tailwindVersion
-    }) => {
-      try {
+    wrapHandler(
+      async ({
+        name,
+        code,
+        framework,
+        width,
+        height,
+        darkMode,
+        tailwindVersion
+      }) => {
         const result = await useCase.check(name, code, framework, {
           viewport: { width, height },
           darkMode,
@@ -15538,16 +15385,8 @@ function registerSnapshotTools(server2, useCase) {
           }
         ];
         return { content };
-      } catch (error51) {
-        const msg = error51 instanceof Error ? error51.message : String(error51);
-        return {
-          content: [
-            { type: "text", text: `Snapshot check failed: ${msg}` }
-          ],
-          isError: true
-        };
       }
-    }
+    )
   );
   server2.tool(
     "snapshot_list",
@@ -15581,6 +15420,133 @@ ${lines.join("\n")}`
   );
 }
 
+// src/tools/watch-tools.ts
+function registerWatchTools(server2, useCase) {
+  server2.tool(
+    "watch_start",
+    "Start watching component files for changes. On every save, the component is automatically rendered and you will receive a notification \u2014 call watch_get_latest(id) to retrieve the rendered screenshot. Use this to create a live feedback loop while editing UI \u2014 the AI sees each change without you needing to call render_file manually.",
+    {
+      patterns: external_exports.array(external_exports.string()).describe(
+        "Glob patterns or absolute file paths to watch (e.g. ['src/components/Button.tsx'])"
+      ),
+      props: external_exports.record(external_exports.string(), external_exports.unknown()).optional().describe("Props to pass to the component on each render")
+    },
+    async ({ patterns, props }) => {
+      const session = useCase.start(patterns, props, async (event) => {
+        if (event.error) {
+          await server2.server.notification({
+            method: "notifications/message",
+            params: {
+              level: "error",
+              logger: "frameshot/watch",
+              data: `[${event.sessionId}] \u274C ${event.filePath}: ${event.error}`
+            }
+          });
+          return;
+        }
+        const summary = `[${event.sessionId}] \u2713 ${event.filePath} \u2014 ${event.width}\xD7${event.height} \xB7 ${event.elapsedMs}ms \xB7 ${event.mode}` + (event.consoleErrors.length ? `
+\u26A0\uFE0F ${event.consoleErrors.join("\n")}` : "") + `
+Call watch_get_latest("${event.sessionId}") to see the render.`;
+        await server2.server.notification({
+          method: "notifications/message",
+          params: {
+            level: "info",
+            logger: "frameshot/watch",
+            data: summary
+          }
+        });
+      });
+      return {
+        content: [
+          {
+            type: "text",
+            text: `\u2713 Watch started (${session.id})
+Watching: ${patterns.join(", ")}
+
+Every time a matched file is saved, it will be rendered automatically and a notification will appear in your MCP log stream. Call \`watch_get_latest\` with id "${session.id}" to retrieve the screenshot.
+
+Call \`watch_stop\` with id "${session.id}" to stop.`
+          }
+        ]
+      };
+    }
+  );
+  server2.tool(
+    "watch_stop",
+    "Stop a running file watcher started with watch_start.",
+    {
+      id: external_exports.string().describe("Watch session ID returned by watch_start (e.g. 'watch-1')")
+    },
+    async ({ id }) => {
+      const stopped = useCase.stop(id);
+      return {
+        content: [
+          {
+            type: "text",
+            text: stopped ? `\u2713 Watch session "${id}" stopped.` : `No active watch session with id "${id}".`
+          }
+        ]
+      };
+    }
+  );
+  server2.tool(
+    "watch_list",
+    "List all currently active file watch sessions.",
+    {},
+    async () => {
+      const sessions = useCase.activeSessions();
+      if (sessions.length === 0) {
+        return {
+          content: [{ type: "text", text: "No active watch sessions." }]
+        };
+      }
+      const lines = sessions.map(
+        (s) => `${s.id}: watching ${s.patterns.join(", ")}`
+      );
+      return {
+        content: [{ type: "text", text: lines.join("\n") }]
+      };
+    }
+  );
+  server2.tool(
+    "watch_get_latest",
+    "Get the latest rendered screenshot from a watch session. Call this after receiving a watch notification to see the current state of the component.",
+    {
+      id: external_exports.string().describe("Watch session ID from watch_start")
+    },
+    async ({ id }) => {
+      const render = useCase.getLatestRender(id);
+      if (!render) {
+        return {
+          content: [
+            { type: "text", text: `No render yet for session "${id}".` }
+          ]
+        };
+      }
+      if (render.error) {
+        return {
+          content: [
+            { type: "text", text: `Last render failed: ${render.error}` }
+          ]
+        };
+      }
+      return {
+        content: [
+          {
+            type: "image",
+            data: render.image,
+            mimeType: "image/png"
+          },
+          {
+            type: "text",
+            text: `${render.filePath} \u2014 ${render.width}\xD7${render.height} \xB7 ${render.elapsedMs}ms \xB7 ${render.mode}`
+          }
+        ]
+      };
+    }
+  );
+}
+
 // src/tools/register.ts
 function registerAllTools(server2, useCases) {
   registerRenderTools(server2, useCases.render);
@@ -15589,36 +15555,18 @@ function registerAllTools(server2, useCases) {
   registerAuditTools(server2, useCases.audit);
   registerSnapshotTools(server2, useCases.snapshot);
   registerCatalogTools(server2, useCases.catalog);
+  registerWatchTools(server2, useCases.watch);
 }
 
 // src/index.ts
-var browserPool = new BrowserPool();
-var htmlBuilder = new HtmlBuilder();
-var imageComparator = new ImageComparator();
-var snapshotStore = new SnapshotStore();
-var viteBundler = new ViteBundler();
-var renderUseCase = new RenderUseCase(
-  browserPool,
-  htmlBuilder,
-  imageComparator,
-  viteBundler
-);
-var screenshotUseCase = new ScreenshotUseCase(browserPool);
-var diffUseCase = new DiffUseCase(renderUseCase, imageComparator);
-var auditUseCase = new AuditUseCase(browserPool, htmlBuilder);
-var snapshotUseCase = new SnapshotUseCase(
-  snapshotStore,
-  renderUseCase,
-  diffUseCase
-);
-var catalogUseCase = new CatalogUseCase(renderUseCase);
+var container = createContainer();
 async function ensureBrowser() {
   try {
-    await browserPool.warmup(["chromium"]);
+    await container.pool.warmup(["chromium"]);
   } catch {
     try {
       execSync("npx playwright install chromium", { stdio: "pipe" });
-      await browserPool.warmup(["chromium"]);
+      await container.pool.warmup(["chromium"]);
     } catch {
     }
   }
@@ -15626,25 +15574,24 @@ async function ensureBrowser() {
 await ensureBrowser();
 var server = new McpServer({
   name: "frameshot",
-  version: "0.5.0"
+  version: "0.8.0"
 });
 registerAllTools(server, {
-  render: renderUseCase,
-  screenshot: screenshotUseCase,
-  diff: diffUseCase,
-  audit: auditUseCase,
-  snapshot: snapshotUseCase,
-  catalog: catalogUseCase
+  render: container.renderUseCase,
+  screenshot: container.screenshotUseCase,
+  diff: container.diffUseCase,
+  audit: container.auditUseCase,
+  snapshot: container.snapshotUseCase,
+  catalog: container.catalogUseCase,
+  watch: container.watchUseCase
 });
 var transport = new StdioServerTransport();
 await server.connect(transport);
 process.on("SIGINT", async () => {
-  await viteBundler.shutdown();
-  await browserPool.shutdown();
+  await container.shutdown();
   process.exit(0);
 });
 process.on("SIGTERM", async () => {
-  await viteBundler.shutdown();
-  await browserPool.shutdown();
+  await container.shutdown();
   process.exit(0);
 });