rlint 0.4.0

package/README.md

@@ -0,0 +1,220 @@
+# rlint
+
+**Catch rendered layout bugs automatically — no screenshots needed.**
+
+Like ESLint, but for your *rendered* UI. Renderlint detects horizontal overflow, covered buttons, tiny touch targets, and other structural bugs that slip through code review.
+
+```
+rlint check http://localhost:3000
+
+❌ OVERFLOW Horizontal overflow detected (page scrolls 740px beyond viewport)
+   └─ Element: div.hero-banner
+   └─ Fix: Add overflow-x: hidden or check for elements with fixed widths
+
+❌ CLICKABILITY Interactive element is covered by another element
+   └─ Element: button.submit-btn
+   └─ Covered by: div.modal-backdrop
+   └─ Fix: Check z-index or remove covering element
+
+⚠️  TOUCH-TARGETS Touch target too small: 32x28px (min: 44x44px)
+   └─ Element: a.nav-link
+   └─ Fix: Add min-width: 44px and min-height: 44px
+
+──────────────────────────────────────────────────
+Results: 2 errors, 1 warning, 47 passed
+──────────────────────────────────────────────────
+```
+
+## The Problem
+
+Layout bugs are invisible in code review. Your PR looks fine, tests pass, but then:
+- The page scrolls horizontally on mobile
+- A modal backdrop covers your buttons
+- Touch targets are too small for actual fingers
+
+These aren't styling issues — they're **structural bugs** that can be detected programmatically using `getBoundingClientRect()`, `getComputedStyle()`, and `elementFromPoint()`.
+
+## Installation
+
+```bash
+npm install rlint
+```
+
+No extra setup. Renderlint uses your system Chrome — no 150MB Chromium download. If Chrome isn't installed, Chromium is downloaded automatically on first run.
+
+> **Note:** The first run may be slower if Chromium needs to be downloaded (~150MB). Subsequent runs use the cached browser.
+
+## Quick Start
+
+```bash
+# Check any URL
+npx rlint check https://example.com
+
+# Check your dev server
+npx rlint check http://localhost:3000
+
+# Check multiple viewports (mobile + desktop)
+npx rlint check --viewport 375x667,1920x1080 http://localhost:3000
+
+# Auto-detect framework and start dev server
+npx rlint dev
+```
+
+## Checks
+
+| Check | Severity | What it catches |
+|-------|----------|-----------------|
+| `overflow` | error | Horizontal scrollbars from content wider than viewport |
+| `clickability` | error | Buttons/links covered by other elements (z-index bugs) |
+| `touch-targets` | warning | Elements smaller than 44×44px (WCAG 2.5.5) |
+| `visibility` | warning | Interactive elements that are invisible or off-screen |
+| `text-overflow` | warning | Text clipped without proper ellipsis handling |
+
+## Framework Support
+
+Renderlint auto-detects your framework and handles hydration:
+
+```bash
+# Auto-detect and start dev server
+npx rlint dev --routes /,/about,/contact
+
+# Specify framework manually
+npx rlint dev --framework nextjs --routes /,/api/health
+```
+
+Supported: **Next.js**, **SvelteKit**, **Vite**, **Remix**, **Astro**, **Nuxt**, **Create React App**
+
+## Library Usage
+
+```typescript
+import { checkPage } from 'rlint';
+import { launchBrowser } from 'rlint/browser';
+
+const browser = await launchBrowser();
+const page = await browser.newPage();
+await page.goto('http://localhost:3000');
+
+const results = await checkPage(page);
+console.log(results.summary);
+// { passed: 47, errors: 1, warnings: 2 }
+
+await browser.close();
+```
+
+## MCP Server (for AI Agents)
+
+Renderlint includes an MCP server for integration with Claude Code and other AI tools:
+
+```json
+{
+  "mcpServers": {
+    "rlint": {
+      "command": "npx",
+      "args": ["rlint-mcp"]
+    }
+  }
+}
+```
+
+Available tools:
+- `check_page` — Check a URL for layout issues
+- `check_html` — Check raw HTML content
+- `check_file` — Check a local HTML file
+- `screenshot` — Take a screenshot (returns image for visual debugging)
+
+## Configuration
+
+```javascript
+// rlint.config.js
+export default {
+  checks: {
+    overflow: { horizontal: true },
+    touchTargets: { minWidth: 44, minHeight: 44 },
+    clickability: { checkCorners: true },
+    textOverflow: { allowEllipsis: true },
+  },
+  ignore: ['.tooltip', '[data-rlint-ignore]'],
+};
+```
+
+### Ignoring Elements
+
+```html
+<!-- Skip specific elements -->
+<input type="checkbox" data-rlint-ignore>
+```
+
+## CI Integration
+
+```yaml
+# .github/workflows/rlint.yml
+name: Renderlint Check
+on: [push, pull_request]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run build
+      - run: npm start & npx wait-on http://localhost:3000
+      - run: npx rlint check --fail-on warning http://localhost:3000
+```
+
+> **Tip:** Renderlint uses system Chrome. If unavailable, Chromium is downloaded to `~/.cache/rlint` on first run. Cache this directory in CI for faster builds.
+
+## CLI Reference
+
+```
+rlint check <urls...>
+  -v, --viewport <size>      Viewport size (e.g., 375x667,1920x1080)
+  -f, --format <format>      Output: text, json, junit
+  -o, --only <checks>        Run specific checks only
+  -i, --ignore <selectors>   Ignore matching elements
+  -c, --config <path>        Config file path
+  --fail-on <severity>       Exit code 1 on: error, warning
+  --headed                   Show browser window
+  --wait-for-hydration       Wait for SPA hydration
+
+rlint dev
+  -r, --routes <routes>      Routes to check (default: /)
+  -p, --port <port>          Dev server port
+  --framework <name>         Framework override
+  --no-start-server          Use existing dev server
+```
+
+## How It Works
+
+Renderlint doesn't compare screenshots. Instead, it queries the DOM:
+
+```javascript
+// Overflow detection
+document.documentElement.scrollWidth > document.documentElement.clientWidth
+
+// Covered element detection
+document.elementFromPoint(x, y) !== expectedElement
+
+// Touch target detection
+element.getBoundingClientRect().width < 44
+```
+
+These checks are deterministic, fast, and don't require human review.
+
+## Why Not Visual Regression?
+
+Visual regression (screenshot comparison) catches everything but requires human review for every change. Renderlint catches **structural bugs** that are objectively wrong:
+
+| Visual Regression | Renderlint |
+|-------------------|------------|
+| Catches color changes | Catches layout bugs |
+| Requires baseline images | No baselines needed |
+| Needs human review | Fully automated |
+| Slow (image comparison) | Fast (DOM queries) |
+
+Use both! Visual regression for design fidelity, Renderlint for structural correctness.
+
+## License
+
+MIT

package/dist/browser.d.ts

@@ -0,0 +1,8 @@
+import { type Browser } from 'puppeteer-core';
+/**
+ * Launch browser - tries system Chrome first, falls back to download.
+ */
+export declare function launchBrowser(options?: {
+    headless?: boolean;
+}): Promise<Browser>;
+//# sourceMappingURL=browser.d.ts.map

package/dist/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AA0GzD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CA4BtF"}

package/dist/browser.js

@@ -0,0 +1,122 @@
+import puppeteer from 'puppeteer-core';
+import * as ChromeLauncher from 'chrome-launcher';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+/**
+ * Find Chrome/Chromium on the system using chrome-launcher.
+ * Returns the executable path or null.
+ */
+function findSystemChrome() {
+    try {
+        const installations = ChromeLauncher.Launcher.getInstallations();
+        if (installations.length > 0) {
+            return installations[0];
+        }
+    }
+    catch { }
+    return null;
+}
+/**
+ * Get the rlint cache directory for downloaded browsers
+ */
+function getCacheDir() {
+    return join(homedir(), '.cache', 'rlint');
+}
+/**
+ * Try to find a previously downloaded Chromium in our cache
+ */
+function findCachedChromium() {
+    const cacheDir = getCacheDir();
+    // Check common locations where puppeteer/browsers stores Chrome
+    const possiblePaths = [
+        join(cacheDir, 'chrome', '**', 'chrome'),
+        join(cacheDir, 'chrome', '**', 'Google Chrome for Testing'),
+    ];
+    // Simple check: look for chrome-for-testing marker file
+    const markerFile = join(cacheDir, '.chromium-path');
+    if (existsSync(markerFile)) {
+        const cachedPath = require('fs').readFileSync(markerFile, 'utf-8').trim();
+        if (existsSync(cachedPath)) {
+            return cachedPath;
+        }
+    }
+    return null;
+}
+/**
+ * Download Chromium as a fallback when no system Chrome is found.
+ * Uses @puppeteer/browsers for the download.
+ */
+async function downloadChromium() {
+    console.log(chalk.yellow('No Chrome installation found.'));
+    console.log(chalk.yellow('Downloading Chromium (~150MB). This is a one-time setup...'));
+    try {
+        // Dynamic import to avoid requiring @puppeteer/browsers unless needed
+        const { install, Browser, resolveBuildId, detectBrowserPlatform } = await import('@puppeteer/browsers');
+        const platform = detectBrowserPlatform();
+        if (!platform) {
+            throw new Error('Could not detect browser platform');
+        }
+        const buildId = await resolveBuildId(Browser.CHROMIUM, platform, 'latest');
+        const cacheDir = getCacheDir();
+        const result = await install({
+            browser: Browser.CHROMIUM,
+            buildId,
+            cacheDir,
+        });
+        // Cache the path for future runs
+        const markerFile = join(cacheDir, '.chromium-path');
+        require('fs').writeFileSync(markerFile, result.executablePath);
+        console.log(chalk.green('Chromium downloaded successfully.'));
+        return result.executablePath;
+    }
+    catch (error) {
+        // Fallback: try npx
+        console.log(chalk.dim('Trying npx fallback...'));
+        try {
+            execSync('npx @puppeteer/browsers install chromium@latest --path ' + getCacheDir(), {
+                stdio: 'inherit',
+            });
+            // Try to find the installed binary
+            const cachedPath = findCachedChromium();
+            if (cachedPath) {
+                return cachedPath;
+            }
+        }
+        catch { }
+        console.error(chalk.red('Failed to download Chromium.'));
+        console.error(chalk.dim('Please install Chrome or Chromium manually.'));
+        throw new Error('No browser available. Install Chrome: https://google.com/chrome');
+    }
+}
+/**
+ * Launch browser - tries system Chrome first, falls back to download.
+ */
+export async function launchBrowser(options) {
+    const headless = options?.headless ?? true;
+    // 1. Try system Chrome
+    let executablePath = findSystemChrome();
+    if (executablePath) {
+        return puppeteer.launch({
+            executablePath,
+            headless,
+        });
+    }
+    // 2. Try cached Chromium
+    executablePath = findCachedChromium();
+    if (executablePath) {
+        return puppeteer.launch({
+            executablePath,
+            headless,
+        });
+    }
+    // 3. Download Chromium
+    executablePath = await downloadChromium();
+    return puppeteer.launch({
+        executablePath,
+        headless,
+    });
+}
+//# sourceMappingURL=browser.js.map

package/dist/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA,OAAO,SAA2B,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,cAAc,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAE7B;;;GAGG;AACH,SAAS,gBAAgB;IACvB,IAAI,CAAC;QACH,MAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;QACjE,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAAC,MAAM,CAAC,CAAA,CAAC;IACV,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,SAAS,WAAW;IAClB,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC5C,CAAC;AAED;;GAEG;AACH,SAAS,kBAAkB;IACzB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,gEAAgE;IAChE,MAAM,aAAa,GAAG;QACpB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC;QACxC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,2BAA2B,CAAC;KAC5D,CAAC;IAEF,wDAAwD;IACxD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IACpD,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;QAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1E,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3B,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,KAAK,UAAU,gBAAgB;IAC7B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAC3D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,4DAA4D,CAAC,CAAC,CAAC;IAExF,IAAI,CAAC;QACH,sEAAsE;QACtE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAC/D,MAAM,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;QACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,MAAM,OAAO,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3E,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC3B,OAAO,EAAE,OAAO,CAAC,QAAQ;YACzB,OAAO;YACP,QAAQ;SACT,CAAC,CAAC;QAEH,iCAAiC;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;QAE/D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAmC,CAAC,CAAC,CAAC;QAC9D,OAAO,MAAM,CAAC,cAAc,CAAC;IAC/B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,oBAAoB;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,CAAC;QACjD,IAAI,CAAC;YACH,QAAQ,CAAC,yDAAyD,GAAG,WAAW,EAAE,EAAE;gBAClF,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;YAEH,mCAAmC;YACnC,MAAM,UAAU,GAAG,kBAAkB,EAAE,CAAC;YACxC,IAAI,UAAU,EAAE,CAAC;gBACf,OAAO,UAAU,CAAC;YACpB,CAAC;QACH,CAAC;QAAC,MAAM,CAAC,CAAA,CAAC;QAEV,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAC,CAAC;QACzD,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC,CAAC;QACxE,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;IACrF,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAgC;IAClE,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,IAAI,CAAC;IAE3C,uBAAuB;IACvB,IAAI,cAAc,GAAG,gBAAgB,EAAE,CAAC;IAExC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,SAAS,CAAC,MAAM,CAAC;YACtB,cAAc;YACd,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAED,yBAAyB;IACzB,cAAc,GAAG,kBAAkB,EAAE,CAAC;IACtC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,SAAS,CAAC,MAAM,CAAC;YACtB,cAAc;YACd,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAED,uBAAuB;IACvB,cAAc,GAAG,MAAM,gBAAgB,EAAE,CAAC;IAC1C,OAAO,SAAS,CAAC,MAAM,CAAC;QACtB,cAAc;QACd,QAAQ;KACT,CAAC,CAAC;AACL,CAAC"}

package/dist/checks/clickability.d.ts

@@ -0,0 +1,3 @@
+import type { Check } from '../types.js';
+export declare const clickabilityCheck: Check;
+//# sourceMappingURL=clickability.d.ts.map

package/dist/checks/clickability.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickability.d.ts","sourceRoot":"","sources":["../../src/checks/clickability.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAuB,MAAM,aAAa,CAAC;AAuB9D,eAAO,MAAM,iBAAiB,EAAE,KA6I/B,CAAC"}

package/dist/checks/clickability.js

@@ -0,0 +1,125 @@
+export const clickabilityCheck = {
+    name: 'clickability',
+    description: 'Detects interactive elements that are covered by other elements',
+    async run(ctx) {
+        const { page, config } = ctx;
+        const checkConfig = typeof config.checks?.clickability === 'object'
+            ? config.checks.clickability
+            : {};
+        const selectors = checkConfig.selectors || [
+            'button',
+            'a',
+            'input',
+            'select',
+            'textarea',
+            '[role="button"]',
+            '[role="link"]',
+            '[onclick]',
+            '[tabindex="0"]',
+        ];
+        const ignoreSelectors = [
+            ...(config.ignore || []),
+            ...(checkConfig.ignore || []),
+            '[data-rlint-ignore]',
+        ];
+        const coveredElements = await page.evaluate(({ selectors, ignoreSelectors }) => {
+            const results = [];
+            const selectorString = selectors.join(', ');
+            const elements = document.querySelectorAll(selectorString);
+            for (const el of elements) {
+                // Skip ignored elements
+                const shouldIgnore = ignoreSelectors.some(sel => {
+                    try {
+                        return el.matches(sel);
+                    }
+                    catch {
+                        return false;
+                    }
+                });
+                if (shouldIgnore)
+                    continue;
+                // Skip hidden elements
+                const style = getComputedStyle(el);
+                if (style.display === 'none' ||
+                    style.visibility === 'hidden' ||
+                    style.opacity === '0') {
+                    continue;
+                }
+                const rect = el.getBoundingClientRect();
+                // Skip zero-size elements
+                if (rect.width === 0 || rect.height === 0)
+                    continue;
+                // Skip off-screen elements
+                if (rect.right < 0 ||
+                    rect.bottom < 0 ||
+                    rect.left > window.innerWidth ||
+                    rect.top > window.innerHeight) {
+                    continue;
+                }
+                // Check center point
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const topElement = document.elementFromPoint(centerX, centerY);
+                if (topElement && topElement !== el && !el.contains(topElement) && !topElement.contains(el)) {
+                    // Element is covered!
+                    let selector = el.tagName.toLowerCase();
+                    if (el.id)
+                        selector += `#${el.id}`;
+                    if (el.className && typeof el.className === 'string') {
+                        selector += '.' + el.className.trim().split(/\s+/).join('.');
+                    }
+                    let coverSelector = topElement.tagName.toLowerCase();
+                    if (topElement.id)
+                        coverSelector += `#${topElement.id}`;
+                    if (topElement.className && typeof topElement.className === 'string') {
+                        coverSelector += '.' + topElement.className.trim().split(/\s+/).join('.');
+                    }
+                    results.push({
+                        selector,
+                        tagName: el.tagName,
+                        className: typeof el.className === 'string' ? el.className : '',
+                        id: el.id || null,
+                        textContent: el.textContent?.slice(0, 50)?.trim() || null,
+                        rect: {
+                            width: rect.width,
+                            height: rect.height,
+                            left: rect.left,
+                            top: rect.top,
+                            right: rect.right,
+                            bottom: rect.bottom,
+                        },
+                        coveredBy: {
+                            selector: coverSelector,
+                            tagName: topElement.tagName,
+                            className: typeof topElement.className === 'string' ? topElement.className : '',
+                        },
+                    });
+                }
+            }
+            return results;
+        }, { selectors, ignoreSelectors });
+        const issues = coveredElements.map(el => ({
+            check: 'clickability',
+            severity: 'error',
+            message: `Interactive element is covered by another element`,
+            element: {
+                selector: el.selector,
+                tagName: el.tagName,
+                className: el.className,
+                id: el.id,
+                textContent: el.textContent,
+                rect: el.rect,
+            },
+            details: {
+                coveredBy: el.coveredBy.selector,
+            },
+            fixHint: `Check z-index of ${el.selector} and ${el.coveredBy.selector}, or remove/reposition the covering element`,
+        }));
+        return {
+            check: 'clickability',
+            passed: Math.max(0, (await page.$$(selectors.join(', '))).length - issues.length),
+            issues,
+        };
+    },
+};
+//# sourceMappingURL=clickability.js.map

package/dist/checks/clickability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickability.js","sourceRoot":"","sources":["../../src/checks/clickability.ts"],"names":[],"mappings":"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"}

package/dist/checks/index.d.ts

@@ -0,0 +1,9 @@
+export { overflowCheck } from './overflow.js';
+export { clickabilityCheck } from './clickability.js';
+export { touchTargetsCheck } from './touch-targets.js';
+export { visibilityCheck } from './visibility.js';
+export { textOverflowCheck } from './text-overflow.js';
+import type { Check } from '../types.js';
+export declare const allChecks: Check[];
+export declare const checksByName: Record<string, Check>;
+//# sourceMappingURL=index.d.ts.map

package/dist/checks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAOvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,eAAO,MAAM,SAAS,EAAE,KAAK,EAM5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAQ9C,CAAC"}

package/dist/checks/index.js

@@ -0,0 +1,27 @@
+export { overflowCheck } from './overflow.js';
+export { clickabilityCheck } from './clickability.js';
+export { touchTargetsCheck } from './touch-targets.js';
+export { visibilityCheck } from './visibility.js';
+export { textOverflowCheck } from './text-overflow.js';
+import { overflowCheck } from './overflow.js';
+import { clickabilityCheck } from './clickability.js';
+import { touchTargetsCheck } from './touch-targets.js';
+import { visibilityCheck } from './visibility.js';
+import { textOverflowCheck } from './text-overflow.js';
+export const allChecks = [
+    overflowCheck,
+    clickabilityCheck,
+    touchTargetsCheck,
+    visibilityCheck,
+    textOverflowCheck,
+];
+export const checksByName = {
+    overflow: overflowCheck,
+    clickability: clickabilityCheck,
+    'touch-targets': touchTargetsCheck,
+    touchTargets: touchTargetsCheck,
+    visibility: visibilityCheck,
+    'text-overflow': textOverflowCheck,
+    textOverflow: textOverflowCheck,
+};
+//# sourceMappingURL=index.js.map

package/dist/checks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/checks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,MAAM,CAAC,MAAM,SAAS,GAAY;IAChC,aAAa;IACb,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,iBAAiB;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA0B;IACjD,QAAQ,EAAE,aAAa;IACvB,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,iBAAiB;IAClC,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,eAAe;IAC3B,eAAe,EAAE,iBAAiB;IAClC,YAAY,EAAE,iBAAiB;CAChC,CAAC"}

package/dist/checks/overflow.d.ts

@@ -0,0 +1,3 @@
+import type { Check } from '../types.js';
+export declare const overflowCheck: Check;
+//# sourceMappingURL=overflow.d.ts.map

package/dist/checks/overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.d.ts","sourceRoot":"","sources":["../../src/checks/overflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAoC,MAAM,aAAa,CAAC;AA0B3E,eAAO,MAAM,aAAa,EAAE,KAsH3B,CAAC"}

package/dist/checks/overflow.js

@@ -0,0 +1,107 @@
+export const overflowCheck = {
+    name: 'overflow',
+    description: 'Detects horizontal overflow causing unwanted scrollbars',
+    async run(ctx) {
+        const { page, config } = ctx;
+        const checkConfig = typeof config.checks?.overflow === 'object'
+            ? config.checks.overflow
+            : {};
+        const ignoreSelectors = [
+            ...(config.ignore || []),
+            ...(checkConfig.ignore || []),
+            '[data-rlint-ignore]',
+        ];
+        const data = await page.evaluate((ignoreSelectors) => {
+            const viewportWidth = window.innerWidth;
+            const documentScrollWidth = document.documentElement.scrollWidth;
+            const hasHorizontalOverflow = documentScrollWidth > viewportWidth;
+            const culprits = [];
+            if (hasHorizontalOverflow) {
+                // Find elements that extend beyond viewport
+                const allElements = document.querySelectorAll('*');
+                for (const el of allElements) {
+                    // Skip ignored elements
+                    const shouldIgnore = ignoreSelectors.some(sel => {
+                        try {
+                            return el.matches(sel);
+                        }
+                        catch {
+                            return false;
+                        }
+                    });
+                    if (shouldIgnore)
+                        continue;
+                    const rect = el.getBoundingClientRect();
+                    // Check if element extends beyond viewport
+                    if (rect.right > viewportWidth + 1) {
+                        const overflowAmount = rect.right - viewportWidth;
+                        // Build a useful selector
+                        let selector = el.tagName.toLowerCase();
+                        if (el.id)
+                            selector += `#${el.id}`;
+                        if (el.className && typeof el.className === 'string') {
+                            selector += '.' + el.className.trim().split(/\s+/).join('.');
+                        }
+                        culprits.push({
+                            selector,
+                            tagName: el.tagName,
+                            className: typeof el.className === 'string' ? el.className : '',
+                            id: el.id || null,
+                            textContent: el.textContent?.slice(0, 50) || null,
+                            rect: {
+                                width: rect.width,
+                                height: rect.height,
+                                left: rect.left,
+                                top: rect.top,
+                                right: rect.right,
+                                bottom: rect.bottom,
+                            },
+                            scrollWidth: el.scrollWidth,
+                            clientWidth: el.clientWidth,
+                            overflowAmount,
+                        });
+                    }
+                }
+                // Sort by overflow amount (worst first) and dedupe by keeping worst ancestor
+                culprits.sort((a, b) => b.overflowAmount - a.overflowAmount);
+            }
+            return {
+                hasHorizontalOverflow,
+                documentScrollWidth,
+                viewportWidth,
+                culprits: culprits.slice(0, 10), // Limit to top 10
+            };
+        }, ignoreSelectors);
+        const issues = [];
+        if (data.hasHorizontalOverflow && data.culprits.length > 0) {
+            // Report the main culprit (usually the root cause)
+            const mainCulprit = data.culprits[0];
+            issues.push({
+                check: 'overflow',
+                severity: 'error',
+                message: `Horizontal overflow detected (page scrolls ${data.documentScrollWidth - data.viewportWidth}px beyond viewport)`,
+                element: {
+                    selector: mainCulprit.selector,
+                    tagName: mainCulprit.tagName,
+                    className: mainCulprit.className,
+                    id: mainCulprit.id,
+                    textContent: mainCulprit.textContent,
+                    rect: mainCulprit.rect,
+                },
+                details: {
+                    documentScrollWidth: data.documentScrollWidth,
+                    viewportWidth: data.viewportWidth,
+                    overflowAmount: mainCulprit.overflowAmount,
+                    otherCulprits: data.culprits.slice(1).map(c => c.selector),
+                },
+                fixHint: 'Add overflow-x: hidden to a container, or check for elements with fixed widths, 100vw, or negative margins',
+            });
+        }
+        return {
+            check: 'overflow',
+            passed: issues.length === 0 ? 1 : 0,
+            issues,
+        };
+    },
+};
+//# sourceMappingURL=overflow.js.map