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

frameshot-mcp 0.3.0 → 0.7.0

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

Files changed (31) hide show

package/README.md +157 -47
package/action.yml +144 -0
package/dist/chunk-3LVWVDET.js +849 -0
package/dist/chunk-47YJG5HR.js +690 -0
package/dist/chunk-67JZQ6OI.js +819 -0
package/dist/chunk-AZCGKIMU.js +850 -0
package/dist/chunk-B3CLIGWU.js +786 -0
package/dist/chunk-C6QSY4WR.js +811 -0
package/dist/chunk-DX54PJKO.js +603 -0
package/dist/chunk-EMCJGIMY.js +984 -0
package/dist/chunk-FQNWGR62.js +849 -0
package/dist/chunk-FTYTZW6D.js +203 -0
package/dist/chunk-JGVKYXY2.js +857 -0
package/dist/chunk-JYPEA4P2.js +846 -0
package/dist/chunk-KHK35HDD.js +855 -0
package/dist/chunk-Q7A3DLED.js +848 -0
package/dist/chunk-SIA6XEHM.js +811 -0
package/dist/chunk-ST35YDI6.js +834 -0
package/dist/chunk-T5OBJK35.js +855 -0
package/dist/chunk-U3GHS7KO.js +837 -0
package/dist/chunk-WS2ASCD6.js +683 -0
package/dist/chunk-WZMHVSUA.js +847 -0
package/dist/chunk-ZZST6K7Y.js +987 -0
package/dist/cli.d.ts +1 -0
package/dist/cli.js +407 -0
package/dist/index.js +1077 -653
package/dist/renderer.d.ts +297 -0
package/dist/renderer.js +34 -0
package/package.json +32 -7
package/scripts/render-changed.mjs +233 -0
package/scripts/setup-labels.sh +48 -0

package/dist/chunk-SIA6XEHM.js ADDED Viewed

@@ -0,0 +1,811 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+// src/domain/types.ts
+var DEVICE_PRESETS = {
+  mobile: { width: 375, height: 667 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1280, height: 800 }
+};
+var EXT_TO_FRAMEWORK = {
+  ".jsx": "react",
+  ".tsx": "react",
+  ".vue": "vue",
+  ".svelte": "svelte",
+  ".html": "html",
+  ".htm": "html"
+};
+// src/infrastructure/browser-pool.ts
+import { chromium, firefox, webkit } from "playwright";
+var BrowserPool = class {
+  pool = /* @__PURE__ */ new Map();
+  async warmup(engines) {
+    await Promise.all(engines.map((e) => this.getSlot(e)));
+  }
+  async getPage(engine) {
+    const slot = await this.getSlot(engine);
+    return slot.page;
+  }
+  async setViewport(engine, viewport) {
+    const slot = await this.getSlot(engine);
+    const current = slot.page.viewportSize();
+    if (current?.width !== viewport.width || current?.height !== viewport.height) {
+      await slot.page.setViewportSize(viewport);
+    }
+  }
+  async shutdown() {
+    for (const slot of this.pool.values()) {
+      await slot.browser.close().catch(() => {
+      });
+    }
+    this.pool.clear();
+  }
+  async getSlot(engine) {
+    const existing = this.pool.get(engine);
+    if (existing?.browser.isConnected() && existing.ready) {
+      return existing;
+    }
+    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}`
+      );
+    }
+    const context = await browser.newContext({
+      viewport: { width: 1280, height: 800 },
+      deviceScaleFactor: 2
+    });
+    const page = await context.newPage();
+    await page.setContent(
+      '<html><head><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script></head><body></body></html>',
+      { waitUntil: "networkidle" }
+    );
+    const slot = { browser, page, ready: true };
+    this.pool.set(engine, slot);
+    return slot;
+  }
+};
+// src/infrastructure/html-builder.ts
+var HtmlBuilder = class {
+  build(code, framework, options) {
+    const { darkMode, css, tailwindVersion } = options;
+    const tailwind = tailwindVersion === "4" ? '<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>' : '<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>';
+    const tailwindConfig = tailwindVersion === "4" ? "" : "<script>tailwind.config={darkMode:'class'}</script>";
+    const customCss = css ? `<style>${css}</style>` : "";
+    const baseStyle = `<style>*{margin:0;box-sizing:border-box}body{padding:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}</style>`;
+    const htmlClass = darkMode ? ' class="dark"' : "";
+    if (framework === "html") {
+      if (code.includes("<html")) return code;
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}${baseStyle}${customCss}</head><body>${code}</body></html>`;
+    }
+    if (framework === "react") {
+      const cleanedCode = code.replace(/['"]use client['"];?\n?/g, "").replace(/['"]use server['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/image['"];?\n?/g, "").replace(/import\s+.*?\s+from\s+['"]next\/link['"];?\n?/g, "");
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+${baseStyle}${customCss}</head><body><div id="root"></div>
+<script type="text/babel">
+const Image = (props) => React.createElement('img', {...props, src: props.src?.src || props.src});
+const Link = ({href, children, ...props}) => React.createElement('a', {href, ...props}, children);
+${cleanedCode}
+const _C = typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:typeof Default!=='undefined'?Default:null;
+if(_C)ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(_C));
+</script></body></html>`;
+    }
+    if (framework === "vue") {
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script>
+const{createApp,ref,reactive,computed,onMounted,watch,watchEffect}=Vue;
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)createApp(_C).mount('#app');
+</script></body></html>`;
+    }
+    if (framework === "svelte") {
+      return `<!DOCTYPE html><html${htmlClass}><head><meta charset="utf-8">${tailwind}${tailwindConfig}
+<script src="https://unpkg.com/svelte@4/compiler.cjs"></script>
+${baseStyle}${customCss}</head><body><div id="app"></div>
+<script type="module">
+import "https://unpkg.com/svelte@4/internal/index.mjs";
+${code}
+const _C=typeof App!=='undefined'?App:typeof Component!=='undefined'?Component:null;
+if(_C)new _C({target:document.getElementById('app')});
+</script></body></html>`;
+    }
+    return code;
+  }
+};
+// src/infrastructure/image-comparator.ts
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+var ImageComparator = class {
+  diff(imageA, imageB, threshold = 0.1) {
+    const bufA = Buffer.from(imageA, "base64");
+    const bufB = Buffer.from(imageB, "base64");
+    const pngA = PNG.sync.read(bufA);
+    const pngB = PNG.sync.read(bufB);
+    const width = Math.max(pngA.width, pngB.width);
+    const height = Math.max(pngA.height, pngB.height);
+    const normalizedA = new PNG({ width, height });
+    const normalizedB = new PNG({ width, height });
+    PNG.bitblt(pngA, normalizedA, 0, 0, pngA.width, pngA.height, 0, 0);
+    PNG.bitblt(pngB, normalizedB, 0, 0, pngB.width, pngB.height, 0, 0);
+    const diffPng = new PNG({ width, height });
+    const diffPixels = pixelmatch(
+      normalizedA.data,
+      normalizedB.data,
+      diffPng.data,
+      width,
+      height,
+      { threshold }
+    );
+    const totalPixels = width * height;
+    return {
+      diff: PNG.sync.write(diffPng).toString("base64"),
+      diffPixels,
+      totalPixels,
+      diffPercentage: Math.round(diffPixels / totalPixels * 1e4) / 100
+    };
+  }
+  composite(images, columns, labelHeight = 30) {
+    const pngs = images.map((buf) => PNG.sync.read(buf));
+    const cellWidth = Math.max(...pngs.map((p) => p.width));
+    const cellHeight = Math.max(...pngs.map((p) => p.height));
+    const rows = Math.ceil(pngs.length / columns);
+    const gridWidth = cellWidth * columns;
+    const gridHeight = (cellHeight + labelHeight) * rows;
+    const grid = new PNG({ width: gridWidth, height: gridHeight });
+    grid.data.fill(255);
+    for (let i = 0; i < pngs.length; i++) {
+      const col = i % columns;
+      const row = Math.floor(i / columns);
+      const x = col * cellWidth;
+      const y = row * (cellHeight + labelHeight) + labelHeight;
+      PNG.bitblt(pngs[i], grid, 0, 0, pngs[i].width, pngs[i].height, x, y);
+    }
+    return {
+      image: PNG.sync.write(grid).toString("base64"),
+      width: gridWidth,
+      height: gridHeight
+    };
+  }
+};
+// src/infrastructure/project-detector.ts
+import { existsSync, readFileSync } from "fs";
+import { dirname, join, resolve } from "path";
+var VITE_CONFIG_NAMES = [
+  "vite.config.ts",
+  "vite.config.js",
+  "vite.config.mjs",
+  "vite.config.mts"
+];
+var ProjectDetector = class {
+  detect(filePath) {
+    const root = this.findProjectRoot(filePath);
+    const viteConfigPath = this.findViteConfig(root);
+    const framework = this.detectFramework(root);
+    const hasVite = this.checkViteAvailable(root);
+    return { root, viteConfigPath, framework, hasVite };
+  }
+  findProjectRoot(startPath) {
+    let dir = dirname(resolve(startPath));
+    while (dir !== dirname(dir)) {
+      if (existsSync(join(dir, "package.json"))) {
+        return dir;
+      }
+      dir = dirname(dir);
+    }
+    return dirname(resolve(startPath));
+  }
+  findViteConfig(root) {
+    for (const name of VITE_CONFIG_NAMES) {
+      const configPath = join(root, name);
+      if (existsSync(configPath)) {
+        return configPath;
+      }
+    }
+    return void 0;
+  }
+  detectFramework(root) {
+    const pkgPath = join(root, "package.json");
+    if (!existsSync(pkgPath)) return "html";
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const allDeps = {
+        ...pkg.dependencies,
+        ...pkg.devDependencies
+      };
+      if (allDeps.react || allDeps["react-dom"]) return "react";
+      if (allDeps.vue) return "vue";
+      if (allDeps.svelte) return "svelte";
+    } catch {
+    }
+    return "html";
+  }
+  checkViteAvailable(root) {
+    const vitePkgPath = join(root, "node_modules", "vite", "package.json");
+    return existsSync(vitePkgPath);
+  }
+};
+// src/infrastructure/vite-bundler.ts
+import { existsSync as existsSync2 } from "fs";
+import { createRequire } from "module";
+import { join as join2, resolve as resolve2 } from "path";
+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) {
+      throw new Error(
+        `Vite not found in ${project.root}. Install vite: npm install -D vite`
+      );
+    }
+    const framework = options.framework ?? project.framework;
+    const entryCode = this.generateEntry(
+      absPath,
+      framework,
+      options.props,
+      project.root
+    );
+    const cached = await this.ensureServer(project);
+    cached.currentEntry = entryCode;
+    cached.lastUsed = Date.now();
+    const mod = cached.server.moduleGraph.getModuleById(
+      "\0virtual:frameshot-entry"
+    );
+    if (mod) {
+      cached.server.moduleGraph.invalidateModule(mod);
+    }
+    return {
+      url: `http://127.0.0.1:${cached.port}/@frameshot/`,
+      project
+    };
+  }
+  async shutdown() {
+    for (const cached of this.servers.values()) {
+      await cached.server.close().catch(() => {
+      });
+    }
+    this.servers.clear();
+  }
+  async ensureServer(project) {
+    const existing = this.servers.get(project.root);
+    if (existing) {
+      return existing;
+    }
+    const vite = await this.importVite(project.root);
+    if (!vite) {
+      throw new Error(`Failed to import vite from ${project.root}`);
+    }
+    const self = this;
+    const server = await vite.createServer({
+      root: project.root,
+      configFile: project.viteConfigPath ?? false,
+      server: {
+        port: 0,
+        strictPort: false,
+        host: "127.0.0.1",
+        hmr: false
+      },
+      logLevel: "error",
+      plugins: [
+        {
+          name: "frameshot-virtual",
+          resolveId(id) {
+            if (id === "virtual:frameshot-entry")
+              return "\0virtual:frameshot-entry";
+            return null;
+          },
+          load(id) {
+            if (id === "\0virtual:frameshot-entry") {
+              const cached2 = self.servers.get(project.root);
+              return cached2?.currentEntry ?? "";
+            }
+            return null;
+          }
+        },
+        {
+          name: "frameshot-html",
+          // biome-ignore lint/suspicious/noExplicitAny: Vite plugin API types unavailable
+          configureServer(server2) {
+            server2.middlewares.use((req, res, next) => {
+              if (req.url === "/@frameshot/" || req.url === "/@frameshot") {
+                const html = `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+  <div id="app"></div>
+  <script type="module">import "virtual:frameshot-entry";</script>
+</body>
+</html>`;
+                server2.transformIndexHtml(req.url, html).then((transformed) => {
+                  res.statusCode = 200;
+                  res.setHeader("Content-Type", "text/html");
+                  res.end(transformed);
+                }).catch(next);
+              } else {
+                next();
+              }
+            });
+          }
+        }
+      ],
+      optimizeDeps: {
+        include: this.getOptimizeDepsInclude(project.framework)
+      }
+    });
+    await server.listen();
+    const address = server.httpServer?.address();
+    const port = typeof address === "object" && address ? address.port : 5173;
+    const cached = {
+      server,
+      port,
+      lastUsed: Date.now(),
+      currentEntry: ""
+    };
+    this.servers.set(project.root, cached);
+    return cached;
+  }
+  // biome-ignore lint/suspicious/noExplicitAny: dynamic import of optional peer dep
+  async importVite(projectRoot) {
+    try {
+      const require2 = createRequire(join2(projectRoot, "package.json"));
+      const vitePath = require2.resolve("vite");
+      return await import(vitePath);
+    } catch {
+      try {
+        return await import("vite");
+      } catch {
+        return null;
+      }
+    }
+  }
+  generateEntry(componentPath, framework, props, projectRoot) {
+    const propsJson = props ? JSON.stringify(props) : "{}";
+    const cssImport = projectRoot ? this.findGlobalCss(projectRoot) : "";
+    switch (framework) {
+      case "react":
+        return `${cssImport}
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import Component from "${componentPath}";
+const props = ${propsJson};
+const root = createRoot(document.getElementById("app"));
+root.render(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",
+      "src/main.css",
+      "src/globals.css",
+      "src/app.css",
+      "src/style.css",
+      "src/styles.css",
+      "app/globals.css"
+    ];
+    for (const candidate of candidates) {
+      const fullPath = join2(projectRoot, candidate);
+      if (existsSync2(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/catalog.ts
+import { readdirSync, statSync } from "fs";
+import { extname, join as join3, relative } from "path";
+var CatalogUseCase = class {
+  constructor(renderUseCase) {
+    this.renderUseCase = renderUseCase;
+  }
+  renderUseCase;
+  async renderCatalog(directory, options = {}) {
+    const { recursive = false, ...renderOptions } = options;
+    const files = this.scanDirectory(directory, recursive);
+    const results = [];
+    for (const filePath of files) {
+      const relativePath = relative(directory, filePath);
+      const framework = this.detectFramework(filePath);
+      try {
+        const { results: renderResults } = await this.renderUseCase.renderFile(
+          filePath,
+          {
+            ...renderOptions,
+            engines: ["chromium"]
+          }
+        );
+        const result = renderResults[0];
+        results.push({
+          path: relativePath,
+          framework,
+          image: result.image,
+          width: result.width,
+          height: result.height,
+          consoleErrors: result.consoleErrors
+        });
+      } catch {
+        results.push({
+          path: relativePath,
+          framework,
+          image: "",
+          width: 0,
+          height: 0,
+          consoleErrors: [`Failed to render ${relativePath}`]
+        });
+      }
+    }
+    return results;
+  }
+  scanDirectory(dir, recursive) {
+    const componentExtensions = /* @__PURE__ */ new Set([
+      ".jsx",
+      ".tsx",
+      ".vue",
+      ".svelte",
+      ".html",
+      ".htm"
+    ]);
+    const files = [];
+    const entries = readdirSync(dir);
+    for (const entry of entries) {
+      if (entry.startsWith(".") || entry === "node_modules") continue;
+      const fullPath = join3(dir, entry);
+      const stat = statSync(fullPath);
+      if (stat.isDirectory() && recursive) {
+        files.push(...this.scanDirectory(fullPath, recursive));
+      } else if (stat.isFile() && componentExtensions.has(extname(entry).toLowerCase())) {
+        files.push(fullPath);
+      }
+    }
+    return files;
+  }
+  detectFramework(filePath) {
+    return EXT_TO_FRAMEWORK[extname(filePath).toLowerCase()] ?? "react";
+  }
+};
+// src/use-cases/diff.ts
+var DiffUseCase = class {
+  constructor(renderUseCase, imageComparator) {
+    this.renderUseCase = renderUseCase;
+    this.imageComparator = imageComparator;
+  }
+  renderUseCase;
+  imageComparator;
+  async diffComponent(before, after, framework, options = {}) {
+    const [beforeResults, afterResults] = await Promise.all([
+      this.renderUseCase.render(before, framework, {
+        ...options,
+        engines: ["chromium"]
+      }),
+      this.renderUseCase.render(after, framework, {
+        ...options,
+        engines: ["chromium"]
+      })
+    ]);
+    const comparison = this.imageComparator.diff(
+      beforeResults[0].image,
+      afterResults[0].image
+    );
+    return {
+      before: beforeResults[0].image,
+      after: afterResults[0].image,
+      ...comparison
+    };
+  }
+  async diffFromReference(code, framework, referenceImage, options = {}) {
+    const { threshold = 0.1, ...renderOptions } = options;
+    const [renderResult] = await this.renderUseCase.render(code, framework, {
+      ...renderOptions,
+      engines: ["chromium"]
+    });
+    const comparison = this.imageComparator.diff(
+      referenceImage,
+      renderResult.image,
+      threshold
+    );
+    return {
+      rendered: renderResult.image,
+      ...comparison,
+      passed: comparison.diffPercentage === 0
+    };
+  }
+};
+// src/use-cases/render.ts
+import { readFileSync as readFileSync2 } from "fs";
+import { extname as extname2 } from "path";
+var RenderUseCase = class {
+  constructor(pool, htmlBuilder, imageComparator, viteBundler) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+    this.imageComparator = imageComparator;
+    this.viteBundler = viteBundler;
+  }
+  pool;
+  htmlBuilder;
+  imageComparator;
+  viteBundler;
+  async render(code, framework, options = {}) {
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    return Promise.all(
+      opts.engines.map((engine) => this.renderHtml(engine, html, opts))
+    );
+  }
+  async renderFile(filePath, options = {}) {
+    const opts = this.resolveOptions(options);
+    const ext = extname2(filePath).toLowerCase();
+    const framework = EXT_TO_FRAMEWORK[ext] ?? "react";
+    if (this.viteBundler) {
+      try {
+        const { url } = await this.viteBundler.getUrl(filePath, {
+          props: options.props,
+          framework,
+          projectRoot: options.projectRoot
+        });
+        const results2 = await Promise.all(
+          opts.engines.map((engine) => this.renderUrl(engine, url, opts))
+        );
+        return { results: results2, mode: "vite" };
+      } catch {
+      }
+    }
+    const code = readFileSync2(filePath, "utf-8");
+    const results = await this.render(code, framework, options);
+    return { results, mode: "cdn" };
+  }
+  async renderInteraction(code, framework, interactions, options = {}) {
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    const page = await this.pool.getPage("chromium");
+    await this.pool.setViewport("chromium", opts.viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    for (const interaction of interactions) {
+      switch (interaction.action) {
+        case "click":
+          if (interaction.selector) await page.click(interaction.selector);
+          break;
+        case "hover":
+          if (interaction.selector) await page.hover(interaction.selector);
+          break;
+        case "focus":
+          if (interaction.selector) await page.focus(interaction.selector);
+          break;
+        case "type":
+          if (interaction.selector && interaction.value)
+            await page.fill(interaction.selector, interaction.value);
+          break;
+        case "wait":
+          await page.waitForTimeout(interaction.ms ?? 300);
+          break;
+      }
+    }
+    const screenshot = await page.screenshot({ type: "png", fullPage: true });
+    const metrics = await page.evaluate(() => ({
+      w: document.documentElement.scrollWidth,
+      h: document.documentElement.scrollHeight
+    }));
+    return {
+      image: screenshot.toString("base64"),
+      width: metrics.w,
+      height: metrics.h
+    };
+  }
+  async captureAnimation(code, framework, options = {}) {
+    const { frames = 5, duration = 1e3 } = options;
+    const opts = this.resolveOptions(options);
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: opts.darkMode,
+      css: opts.css,
+      tailwindVersion: opts.tailwindVersion
+    });
+    const page = await this.pool.getPage("chromium");
+    await this.pool.setViewport("chromium", opts.viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const interval = duration / (frames - 1);
+    const results = [];
+    for (let i = 0; i < frames; i++) {
+      if (i > 0) await page.waitForTimeout(interval);
+      const screenshot = await page.screenshot({
+        type: "png",
+        fullPage: false
+      });
+      results.push({
+        timestamp: Math.round(i * interval),
+        image: screenshot.toString("base64")
+      });
+    }
+    return results;
+  }
+  async renderGrid(cells, framework, options = {}) {
+    const { columns = Math.min(cells.length, 3) } = options;
+    const screenshots = await Promise.all(
+      cells.map(async (cell) => {
+        const [result] = await this.render(cell.code, framework, {
+          ...options,
+          engines: ["chromium"]
+        });
+        return Buffer.from(result.image, "base64");
+      })
+    );
+    const composite = this.imageComparator.composite(screenshots, columns);
+    return { ...composite, cells: cells.length };
+  }
+  async renderMatrix(code, framework, viewports, themes, options = {}) {
+    const combinations = [];
+    for (const viewport of viewports) {
+      for (const theme of themes) {
+        combinations.push({ viewport, theme });
+      }
+    }
+    return Promise.all(
+      combinations.map(async ({ viewport, theme }) => {
+        const [result] = await this.render(code, framework, {
+          ...options,
+          viewport: { width: viewport.width, height: viewport.height },
+          darkMode: theme === "dark",
+          engines: ["chromium"],
+          fullPage: true
+        });
+        return {
+          viewport: viewport.label,
+          theme,
+          image: result.image,
+          width: result.width,
+          height: result.height,
+          consoleErrors: result.consoleErrors
+        };
+      })
+    );
+  }
+  async renderHtml(engine, html, options) {
+    const page = await this.pool.getPage(engine);
+    await this.pool.setViewport(engine, options.viewport);
+    const consoleErrors = [];
+    const onError = (msg) => {
+      if (msg.type() === "error") consoleErrors.push(msg.text());
+    };
+    page.on("console", onError);
+    page.on("pageerror", (err) => consoleErrors.push(err.message));
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    if (options.waitFor > 0) {
+      await page.waitForTimeout(options.waitFor);
+    }
+    const screenshot = await page.screenshot({
+      type: "png",
+      fullPage: options.fullPage
+    });
+    const metrics = await page.evaluate(() => ({
+      w: document.documentElement.scrollWidth,
+      h: document.documentElement.scrollHeight
+    }));
+    page.removeListener("console", onError);
+    return {
+      engine,
+      image: screenshot.toString("base64"),
+      width: metrics.w,
+      height: metrics.h,
+      consoleErrors
+    };
+  }
+  async renderUrl(engine, url, options) {
+    const page = await this.pool.getPage(engine);
+    await this.pool.setViewport(engine, options.viewport);
+    const consoleErrors = [];
+    const onError = (msg) => {
+      if (msg.type() === "error") consoleErrors.push(msg.text());
+    };
+    page.on("console", onError);
+    page.on("pageerror", (err) => consoleErrors.push(err.message));
+    await page.goto(url, { waitUntil: "load", timeout: 15e3 });
+    await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+    });
+    if (options.waitFor > 0) {
+      await page.waitForTimeout(options.waitFor);
+    }
+    const screenshot = await page.screenshot({
+      type: "png",
+      fullPage: options.fullPage
+    });
+    const metrics = await page.evaluate(() => ({
+      w: document.documentElement.scrollWidth,
+      h: document.documentElement.scrollHeight
+    }));
+    page.removeListener("console", onError);
+    return {
+      engine,
+      image: screenshot.toString("base64"),
+      width: metrics.w,
+      height: metrics.h,
+      consoleErrors
+    };
+  }
+  resolveOptions(partial) {
+    return {
+      viewport: partial.viewport ?? { width: 1280, height: 800 },
+      engines: partial.engines ?? ["chromium"],
+      fullPage: partial.fullPage ?? true,
+      darkMode: partial.darkMode ?? false,
+      css: partial.css ?? "",
+      tailwindVersion: partial.tailwindVersion ?? "3",
+      waitFor: partial.waitFor ?? 0
+    };
+  }
+};
+export {
+  __export,
+  DEVICE_PRESETS,
+  EXT_TO_FRAMEWORK,
+  BrowserPool,
+  HtmlBuilder,
+  ImageComparator,
+  ProjectDetector,
+  ViteBundler,
+  CatalogUseCase,
+  DiffUseCase,
+  RenderUseCase
+};