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-47YJG5HR.js ADDED Viewed

@@ -0,0 +1,690 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+// 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/snapshot-store.ts
+var SnapshotStore = class {
+  store = /* @__PURE__ */ new Map();
+  save(key, image) {
+    this.store.set(key, { image, timestamp: Date.now() });
+  }
+  get(key) {
+    return this.store.get(key);
+  }
+  list() {
+    return Array.from(this.store.entries()).map(([key, val]) => ({
+      key,
+      timestamp: val.timestamp
+    }));
+  }
+};
+// 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/use-cases/audit.ts
+var AuditUseCase = class {
+  constructor(pool, htmlBuilder) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+  }
+  pool;
+  htmlBuilder;
+  async auditA11y(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const axeSource = await import("axe-core").then((m) => m.source);
+    await page.addScriptTag({ content: axeSource });
+    const results = await page.evaluate(() => {
+      return window.axe.run();
+    });
+    return {
+      violations: results.violations.map(
+        (v) => ({
+          id: v.id,
+          impact: v.impact,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({
+            html: n.html,
+            target: n.target
+          }))
+        })
+      ),
+      passes: results.passes.length,
+      incomplete: results.incomplete.length
+    };
+  }
+  async perfAudit(code, framework, options = {}) {
+    const html = this.htmlBuilder.build(code, framework, {
+      darkMode: options.darkMode ?? false,
+      css: options.css ?? "",
+      tailwindVersion: options.tailwindVersion ?? "3"
+    });
+    const page = await this.pool.getPage("chromium");
+    const viewport = options.viewport ?? { width: 1280, height: 800 };
+    await this.pool.setViewport("chromium", viewport);
+    const start = performance.now();
+    await page.setContent(html, { waitUntil: "load", timeout: 1e4 });
+    const renderTimeMs = Math.round(performance.now() - start);
+    const metrics = await page.evaluate(() => {
+      const all = document.querySelectorAll("*");
+      let maxDepth = 0;
+      for (const el of all) {
+        let depth = 0;
+        let node = el;
+        while (node) {
+          depth++;
+          node = node.parentElement;
+        }
+        if (depth > maxDepth) maxDepth = depth;
+      }
+      return {
+        domElements: all.length,
+        domDepth: maxDepth,
+        scriptCount: document.querySelectorAll("script").length,
+        styleSheetCount: document.styleSheets.length,
+        imageCount: document.querySelectorAll("img").length,
+        totalDomSize: document.documentElement.outerHTML.length
+      };
+    });
+    return { renderTimeMs, ...metrics };
+  }
+};
+// src/use-cases/catalog.ts
+import { readdirSync, readFileSync, statSync } from "fs";
+import { extname, join, 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);
+      const code = readFileSync(filePath, "utf-8");
+      try {
+        const [result] = await this.renderUseCase.render(code, framework, {
+          ...renderOptions,
+          engines: ["chromium"]
+        });
+        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 = join(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
+var RenderUseCase = class {
+  constructor(pool, htmlBuilder, imageComparator) {
+    this.pool = pool;
+    this.htmlBuilder = htmlBuilder;
+    this.imageComparator = imageComparator;
+  }
+  pool;
+  htmlBuilder;
+  imageComparator;
+  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 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
+    };
+  }
+  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
+    };
+  }
+};
+// src/use-cases/screenshot.ts
+var ScreenshotUseCase = class {
+  constructor(pool) {
+    this.pool = pool;
+  }
+  pool;
+  async screenshotUrl(url, options = {}) {
+    const engines = options.engines ?? ["chromium"];
+    const { waitForNetworkIdle = true } = options;
+    return Promise.all(
+      engines.map(async (engine) => {
+        const { width = 1280, height = 800 } = options.viewport ?? {};
+        const fullPage = options.fullPage ?? true;
+        const waitFor = options.waitFor ?? 0;
+        const page = await this.pool.getPage(engine);
+        await this.pool.setViewport(engine, { width, height });
+        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: "domcontentloaded", timeout: 15e3 });
+        if (waitForNetworkIdle) {
+          await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => {
+          });
+        }
+        if (options.waitForSelector) {
+          await page.waitForSelector(options.waitForSelector, {
+            timeout: 1e4
+          });
+        }
+        if (waitFor > 0) {
+          await page.waitForTimeout(waitFor);
+        }
+        const screenshot = await page.screenshot({ type: "png", 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 screenshotUrlWithRetry(url, options = {}) {
+    const { retryCount = 0, ...screenshotOpts } = options;
+    const maxAttempts = retryCount + 1;
+    let lastError;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        if (attempt > 0) {
+          const delay = 300 * 2 ** (attempt - 1);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        return await this.screenshotUrl(url, screenshotOpts);
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    throw lastError;
+  }
+};
+// src/use-cases/snapshot.ts
+var SnapshotUseCase = class {
+  constructor(store, renderUseCase, diffUseCase) {
+    this.store = store;
+    this.renderUseCase = renderUseCase;
+    this.diffUseCase = diffUseCase;
+  }
+  store;
+  renderUseCase;
+  diffUseCase;
+  async save(key, code, framework, options = {}) {
+    const [result] = await this.renderUseCase.render(code, framework, {
+      ...options,
+      engines: ["chromium"]
+    });
+    this.store.save(key, result.image);
+    return { image: result.image, width: result.width, height: result.height };
+  }
+  async check(key, code, framework, options = {}) {
+    const snapshot = this.store.get(key);
+    if (!snapshot) return null;
+    return this.diffUseCase.diffFromReference(
+      code,
+      framework,
+      snapshot.image,
+      options
+    );
+  }
+  list() {
+    return this.store.list();
+  }
+};
+export {
+  __export,
+  BrowserPool,
+  HtmlBuilder,
+  ImageComparator,
+  SnapshotStore,
+  DEVICE_PRESETS,
+  EXT_TO_FRAMEWORK,
+  AuditUseCase,
+  CatalogUseCase,
+  DiffUseCase,
+  RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotUseCase
+};