styleproof 3.1.4 → 3.2.0

package/dist/variant-crawler.js

@@ -0,0 +1,275 @@
+import { createHash } from 'node:crypto';
+import { captureStyleMap } from './capture.js';
+import { diffStyleMaps } from './diff.js';
+function slug(value) {
+    return (value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 48) || 'state');
+}
+function routeUrl(route, baseUrl) {
+    if (!baseUrl)
+        return route.url;
+    return new URL(route.url, baseUrl).href;
+}
+function pathAndSearch(url) {
+    const parsed = new URL(url);
+    return parsed.pathname + parsed.search;
+}
+function diffHash(findings) {
+    return createHash('sha256').update(JSON.stringify(findings)).digest('hex').slice(0, 16);
+}
+function variantKey(candidate) {
+    if (candidate.reason === 'tab')
+        return `${slug(candidate.label)}-tab`;
+    if (candidate.reason === 'form-validation')
+        return `${slug(candidate.label)}-errors`;
+    if (candidate.reason === 'select-option')
+        return `${slug(candidate.label)}-selected`;
+    if (candidate.reason === 'aria-expanded')
+        return `${slug(candidate.label)}-expanded`;
+    if (candidate.reason === 'aria-haspopup')
+        return `${slug(candidate.label)}-open`;
+    return slug(candidate.label);
+}
+function liveKey(candidate) {
+    return slug(candidate.cls || candidate.role || candidate.ariaLive || candidate.reason || candidate.tag);
+}
+function liveSelector(candidate) {
+    return candidate.path;
+}
+// fallow-ignore-next-line complexity
+function collectCandidates() {
+    const controls = [
+        '[aria-expanded]',
+        '[aria-haspopup]',
+        'button',
+        'summary',
+        '[role="button"]',
+        '[role="tab"]',
+        '[role="menuitem"]',
+        '[role="combobox"]',
+        'select',
+        'form',
+    ].join(',');
+    const dangerous = /\b(delete|remove|destroy|logout|log out|sign out|publish|deploy|pay|purchase|buy|checkout|archive|disconnect)\b/i;
+    const esc = (value) => CSS.escape(value);
+    const quote = (value) => JSON.stringify(value);
+    const visible = (el) => {
+        const box = el.getBoundingClientRect();
+        const cs = getComputedStyle(el);
+        return box.width > 0 && box.height > 0 && cs.display !== 'none' && cs.visibility !== 'hidden';
+    };
+    const unique = (selector) => document.querySelectorAll(selector).length === 1;
+    const pathSelector = (el) => {
+        const parts = [];
+        let cur = el;
+        while (cur && cur !== document.documentElement) {
+            const tag = cur.tagName.toLowerCase();
+            let index = 1;
+            for (let sib = cur.previousElementSibling; sib; sib = sib.previousElementSibling) {
+                if (sib.tagName === cur.tagName)
+                    index++;
+            }
+            parts.unshift(`${tag}:nth-of-type(${index})`);
+            cur = cur.parentElement;
+        }
+        return parts.join(' > ');
+    };
+    const selectorFor = (el) => {
+        const attrs = ['data-testid', 'data-test', 'aria-label', 'name'];
+        const id = el.getAttribute('id');
+        if (id && unique(`#${esc(id)}`))
+            return `#${esc(id)}`;
+        for (const attr of attrs) {
+            const value = el.getAttribute(attr);
+            if (!value)
+                continue;
+            const selector = `${el.tagName.toLowerCase()}[${attr}=${quote(value)}]`;
+            if (unique(selector))
+                return selector;
+        }
+        return pathSelector(el);
+    };
+    const labelFor = (el) => {
+        const own = (el.getAttribute('aria-label') || el.getAttribute('name') || el.textContent || '').trim();
+        return own.replace(/\s+/g, ' ').slice(0, 80) || el.tagName.toLowerCase();
+    };
+    const reasonFor = (el) => {
+        if (el.getAttribute('role') === 'tab')
+            return 'tab';
+        if (el.tagName.toLowerCase() === 'form')
+            return 'form-validation';
+        if (el.tagName.toLowerCase() === 'select')
+            return 'select-option';
+        if (el.hasAttribute('aria-expanded'))
+            return 'aria-expanded';
+        if (el.hasAttribute('aria-haspopup'))
+            return 'aria-haspopup';
+        return 'semantic-click';
+    };
+    const seen = new Set();
+    const out = [];
+    for (const el of [...document.querySelectorAll(controls)]) {
+        if (el instanceof HTMLAnchorElement && el.href)
+            continue;
+        if (el.matches(':disabled,[aria-disabled="true"]'))
+            continue;
+        if (!visible(el))
+            continue;
+        const selector = selectorFor(el);
+        if (seen.has(selector))
+            continue;
+        seen.add(selector);
+        const label = labelFor(el);
+        if (dangerous.test(label)) {
+            out.push({ action: 'click', selector, reason: 'unsafe-label', label });
+            continue;
+        }
+        if (el instanceof HTMLFormElement) {
+            if (el.noValidate || !el.querySelector('input[required],textarea[required],select[required]'))
+                continue;
+            out.push({ action: 'submit-empty', selector, reason: 'form-validation', label });
+        }
+        else if (el instanceof HTMLSelectElement) {
+            const next = [...el.options].find((o) => !o.disabled && o.value !== el.value);
+            if (next)
+                out.push({ action: 'select-option', selector, reason: 'select-option', label, value: next.value });
+        }
+        else {
+            out.push({ action: 'click', selector, reason: reasonFor(el), label });
+        }
+    }
+    return out;
+}
+async function discoverCandidates(page) {
+    return page.evaluate(collectCandidates);
+}
+async function perform(page, candidate) {
+    const target = page.locator(candidate.selector).first();
+    if (candidate.action === 'select-option') {
+        await target.selectOption(candidate.value ?? '');
+    }
+    else if (candidate.action === 'submit-empty') {
+        await target.evaluate((node) => {
+            const form = node;
+            for (const control of form.querySelectorAll('input, textarea, select')) {
+                if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement)
+                    control.value = '';
+                if (control instanceof HTMLSelectElement)
+                    control.selectedIndex = -1;
+            }
+            form.requestSubmit();
+        });
+    }
+    else {
+        await target.click();
+    }
+}
+function captureOptions(options) {
+    return {
+        ignore: options.ignore,
+        stabilize: options.stabilize,
+        captureStates: false,
+    };
+}
+function liveStatesFrom(candidates = []) {
+    return candidates.map((candidate) => ({
+        key: liveKey(candidate),
+        selector: liveSelector(candidate),
+        reason: candidate.reason,
+        label: candidate.cls || candidate.role || candidate.tag,
+        fixtureRequired: true,
+        ...(candidate.role ? { role: candidate.role } : {}),
+        ...(candidate.ariaLive ? { ariaLive: candidate.ariaLive } : {}),
+        ...(candidate.ariaBusy ? { ariaBusy: candidate.ariaBusy } : {}),
+    }));
+}
+function unsafeSkip(candidate) {
+    return {
+        reason: 'unsafe-label',
+        selector: candidate.selector,
+        label: candidate.label,
+        detail: 'label matched the built-in destructive-action guard',
+    };
+}
+async function tryCandidate(page, url, before, candidate, options, seenDiffs) {
+    await page.goto(url, { waitUntil: 'load' });
+    const start = pathAndSearch(page.url());
+    try {
+        await perform(page, candidate);
+        const afterUrl = pathAndSearch(page.url());
+        if (afterUrl !== start) {
+            return {
+                skip: {
+                    reason: 'navigated',
+                    selector: candidate.selector,
+                    label: candidate.label,
+                    detail: `${start} -> ${afterUrl}`,
+                },
+            };
+        }
+        const after = await captureStyleMap(page, captureOptions(options));
+        const findings = diffStyleMaps(before, after);
+        if (!findings.length)
+            return {};
+        const hash = diffHash(findings);
+        if (seenDiffs.has(hash))
+            return {};
+        seenDiffs.add(hash);
+        return {
+            variant: {
+                key: variantKey(candidate),
+                action: candidate.action,
+                selector: candidate.selector,
+                reason: candidate.reason,
+                label: candidate.label,
+                findings: findings.length,
+                diffHash: hash,
+                ...(candidate.value ? { value: candidate.value } : {}),
+            },
+        };
+    }
+    catch (e) {
+        return {
+            skip: {
+                reason: 'action-failed',
+                selector: candidate.selector,
+                label: candidate.label,
+                detail: e instanceof Error ? e.message : String(e),
+            },
+        };
+    }
+}
+/**
+ * Discover one-step UI states by trying semantic controls and keeping only
+ * actions whose rendered computed-style map differs from the route baseline.
+ */
+export async function harvestStyleVariants(page, options) {
+    const maxActions = options.maxActionsPerRoute ?? 40;
+    const routes = [];
+    for (const route of options.routes) {
+        const url = routeUrl(route, options.baseUrl);
+        await page.goto(url, { waitUntil: 'load' });
+        const before = await captureStyleMap(page, captureOptions(options));
+        const candidates = await discoverCandidates(page);
+        const liveStates = liveStatesFrom(before.liveCandidates);
+        const variants = [];
+        const skipped = [];
+        const seenDiffs = new Set();
+        for (const candidate of candidates.slice(0, maxActions)) {
+            if (candidate.reason === 'unsafe-label') {
+                skipped.push(unsafeSkip(candidate));
+                continue;
+            }
+            const result = await tryCandidate(page, url, before, candidate, options, seenDiffs);
+            if (result.variant)
+                variants.push(result.variant);
+            if (result.skip)
+                skipped.push(result.skip);
+        }
+        routes.push({ key: route.key, url: route.url, variants, liveStates, skipped });
+    }
+    return { routes };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "description": "Catch every CSS change before it ships — review PRs and certify refactors by the browser's computed styles, not pixels. Works with any styling system.",
   "keywords": [
     "playwright",
@@ -39,7 +39,8 @@
     "styleproof-init": "./bin/styleproof-init.mjs",
     "styleproof-map": "./bin/styleproof-map.mjs",
     "styleproof-diff": "./bin/styleproof-diff.mjs",
-    "styleproof-report": "./bin/styleproof-report.mjs"
+    "styleproof-report": "./bin/styleproof-report.mjs",
+    "styleproof-variants": "./bin/styleproof-variants.mjs"
   },
   "files": [
     "dist",
@@ -60,6 +61,7 @@
     "lint:fix": "eslint . --fix",
     "format": "prettier --write \"{src,bin,test,example,scripts}/**/*.{ts,mjs,js}\" \"*.{ts,js,mjs,json,md}\"",
     "format:check": "prettier --check \"{src,bin,test,example,scripts}/**/*.{ts,mjs,js}\" \"*.{ts,js,mjs,json,md}\"",
+    "privacy:check": "node scripts/privacy-check.mjs",
     "test": "npm run build && node --test test/*.test.mjs",
     "test:watch": "node --test --watch test/*.test.mjs",
     "test:e2e": "npm run build && playwright test",
@@ -68,7 +70,7 @@
     "demo:check": "npm run build && node scripts/demo-report.mjs --check",
     "init": "node ./bin/styleproof-init.mjs",
     "prepare": "npm run build && husky",
-    "prepublishOnly": "npm run clean && npm run build && npm run typecheck && npm run lint && npm run format:check && npm test && npm run test:e2e"
+    "prepublishOnly": "npm run clean && npm run build && npm run typecheck && npm run lint && npm run format:check && npm run privacy:check && npm test && npm run test:e2e"
   },
   "peerDependencies": {
     "@playwright/test": ">=1.40"