@argus-design/scorer 2026.4.12

package/dist/index.js

@@ -0,0 +1,2461 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BUILT_IN_RULES: () => BUILT_IN_RULES,
+  RULE_COUNT: () => RULE_COUNT,
+  audit: () => audit,
+  borderRadiusConsistency: () => borderRadiusConsistency,
+  colorConsistency: () => colorConsistency,
+  colorOnlyInformation: () => colorOnlyInformation,
+  colorPaletteSize: () => colorPaletteSize,
+  compare: () => compare,
+  containerPadding: () => containerPadding,
+  contentDensity: () => contentDensity,
+  contrastCompliance: () => contrastCompliance,
+  ctaDominance: () => ctaDominance,
+  cursorAffordance: () => cursorAffordance,
+  customPropertyUsage: () => customPropertyUsage,
+  documentLanguage: () => documentLanguage,
+  emptyInteractiveElements: () => emptyInteractiveElements,
+  flexAlignmentExplicit: () => flexAlignmentExplicit,
+  fontFamilyCount: () => fontFamilyCount,
+  fontSizeVariety: () => fontSizeVariety,
+  fontWeightUsage: () => fontWeightUsage,
+  formatReport: () => formatReport,
+  generateAuditHTMLReport: () => generateAuditHTMLReport,
+  generateHTMLReport: () => generateHTMLReport,
+  getAllRuleIds: () => getAllRuleIds,
+  getRuleById: () => getRuleById,
+  getRuleCounts: () => getRuleCounts,
+  getRulesByCategory: () => getRulesByCategory,
+  headingLevelStructure: () => headingLevelStructure,
+  headingSizeProgression: () => headingSizeProgression,
+  iconButtonSize: () => iconButtonSize,
+  imageAltText: () => imageAltText,
+  imageAspectConsistency: () => imageAspectConsistency,
+  imageContainment: () => imageContainment,
+  imageDimensions: () => imageDimensions,
+  inputAffordance: () => inputAffordance,
+  interactiveStateConsistency: () => interactiveStateConsistency,
+  landmarkPresence: () => landmarkPresence,
+  layoutNestingDepth: () => layoutNestingDepth,
+  lineHeightReadability: () => lineHeightReadability,
+  lineLength: () => lineLength,
+  linkDistinguishability: () => linkDistinguishability,
+  overflowDetection: () => overflowDetection,
+  positioningAudit: () => positioningAudit,
+  pureBlackAvoidance: () => pureBlackAvoidance,
+  score: () => score,
+  sectionBreathing: () => sectionBreathing,
+  semanticInteractive: () => semanticInteractive,
+  semanticLists: () => semanticLists,
+  semanticTextElements: () => semanticTextElements,
+  shadowConsistency: () => shadowConsistency,
+  spacingConsistency: () => spacingConsistency,
+  spacingScale: () => spacingScale,
+  spacingVariety: () => spacingVariety,
+  suggest: () => suggest,
+  tableStructure: () => tableStructure,
+  textEdgePadding: () => textEdgePadding,
+  touchTargetSize: () => touchTargetSize,
+  transitionPresence: () => transitionPresence,
+  transitionTiming: () => transitionTiming,
+  typeScale: () => typeScale,
+  visualWeightDistribution: () => visualWeightDistribution,
+  zIndexSanity: () => zIndexSanity
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core/engine.ts
+var import_protocol4 = require("@argus-design/protocol");
+
+// src/rules/spacing.ts
+var import_protocol = require("@argus-design/protocol");
+var spacingScale = {
+  id: "spacing-scale",
+  name: "Spacing Scale Adherence",
+  category: "spacing",
+  description: "Checks that margin and padding values align to a spacing scale (8px grid by default)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const offGrid = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const spacingProps = [
+        { name: "margin-top", value: el.margin.top },
+        { name: "margin-right", value: el.margin.right },
+        { name: "margin-bottom", value: el.margin.bottom },
+        { name: "margin-left", value: el.margin.left },
+        { name: "padding-top", value: el.padding.top },
+        { name: "padding-right", value: el.padding.right },
+        { name: "padding-bottom", value: el.padding.bottom },
+        { name: "padding-left", value: el.padding.left }
+      ];
+      for (const prop of spacingProps) {
+        if (prop.value <= 0) continue;
+        const rounded = Math.round(prop.value);
+        if (!import_protocol.SPACING_SCALE.includes(rounded) && rounded > 2) {
+          offGrid.push({
+            selector: el.selector,
+            property: prop.name,
+            value: rounded
+          });
+        }
+      }
+    }
+    if (offGrid.length > 0) {
+      const significant = offGrid.filter((o) => {
+        const nearest = import_protocol.SPACING_SCALE.reduce(
+          (prev, curr) => Math.abs(curr - o.value) < Math.abs(prev - o.value) ? curr : prev
+        );
+        return Math.abs(o.value - nearest) > 2;
+      });
+      if (significant.length > 0) {
+        const severity = significant.length > 10 ? "error" : "warning";
+        const impact = Math.min(25, Math.round(significant.length * 1.5));
+        findings.push({
+          ruleId: "spacing-scale",
+          severity,
+          category: "spacing",
+          selector: significant[0].selector,
+          message: `${significant.length} spacing value(s) don't align to the 8px grid`,
+          measured: `${significant.length} off-grid values`,
+          expected: "All spacing values on 8px grid (0, 4, 8, 12, 16, 24, 32, 48, 64)",
+          suggestion: `Nearest grid values: ${significant.slice(0, 3).map((s) => {
+            const nearest = import_protocol.SPACING_SCALE.reduce(
+              (prev, curr) => Math.abs(curr - s.value) < Math.abs(prev - s.value) ? curr : prev
+            );
+            return `${s.value}px \u2192 ${nearest}px`;
+          }).join(", ")}`,
+          impact
+        });
+      }
+    }
+    if (findings.length === 0) {
+      findings.push({
+        ruleId: "spacing-scale",
+        severity: "pass",
+        category: "spacing",
+        selector: "body",
+        message: "All spacing values align to the spacing scale",
+        measured: "0 off-grid values",
+        expected: "0 off-grid values",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var spacingConsistency = {
+  id: "spacing-consistency",
+  name: "Spacing Consistency",
+  category: "spacing",
+  description: "Checks that gaps between sibling elements are uniform",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const parentMap = /* @__PURE__ */ new Map();
+    for (const el of snapshot.elements) {
+      if (!el.parentSelector || !el.isVisible) continue;
+      const siblings = parentMap.get(el.parentSelector) ?? [];
+      siblings.push(el);
+      parentMap.set(el.parentSelector, siblings);
+    }
+    for (const [parentSelector, children] of parentMap) {
+      if (children.length < 3) continue;
+      const sorted = [...children].sort((a, b) => a.box.y - b.box.y);
+      const gaps = [];
+      for (let i = 1; i < sorted.length; i++) {
+        const gap = sorted[i].box.y - (sorted[i - 1].box.y + sorted[i - 1].box.height);
+        if (gap >= 0 && gap < 200) gaps.push(Math.round(gap));
+      }
+      if (gaps.length < 2) continue;
+      const uniqueGaps = [...new Set(gaps)];
+      if (uniqueGaps.length > 1) {
+        const mode = findMode(gaps);
+        const inconsistent = gaps.filter((g) => g !== mode);
+        if (inconsistent.length > 0) {
+          findings.push({
+            ruleId: "spacing-consistency",
+            severity: uniqueGaps.length > 3 ? "error" : "warning",
+            category: "spacing",
+            selector: parentSelector,
+            message: `Inconsistent vertical gaps between ${children.length} siblings: ${uniqueGaps.join("px, ")}px`,
+            measured: `${uniqueGaps.length} distinct gap values`,
+            expected: "1 consistent gap value",
+            suggestion: `Set uniform gap of ${mode}px (most common value) on parent container`,
+            impact: Math.min(15, uniqueGaps.length * 4)
+          });
+        }
+      }
+    }
+    if (findings.length === 0) {
+      findings.push({
+        ruleId: "spacing-consistency",
+        severity: "pass",
+        category: "spacing",
+        selector: "body",
+        message: "Sibling element spacing is consistent",
+        measured: "Uniform gaps",
+        expected: "Uniform gaps",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var spacingVariety = {
+  id: "spacing-variety",
+  name: "Spacing Value Variety",
+  category: "spacing",
+  description: "Checks that the page uses a reasonable number of distinct spacing values (not too many, not too few)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const distinct = snapshot.spacingValues.length;
+    if (distinct > 15) {
+      findings.push({
+        ruleId: "spacing-variety",
+        severity: "warning",
+        category: "spacing",
+        selector: "body",
+        message: `${distinct} distinct spacing values found \u2014 suggests inconsistent spacing system`,
+        measured: distinct,
+        expected: "5\u201312 distinct values",
+        suggestion: "Consolidate spacing values to a consistent scale. Use CSS custom properties for spacing tokens.",
+        impact: Math.min(15, Math.round((distinct - 12) * 1.5))
+      });
+    } else {
+      findings.push({
+        ruleId: "spacing-variety",
+        severity: "pass",
+        category: "spacing",
+        selector: "body",
+        message: `${distinct} distinct spacing values \u2014 within reasonable range`,
+        measured: distinct,
+        expected: "5\u201312 distinct values",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var containerPadding = {
+  id: "container-padding",
+  name: "Container Padding Consistency",
+  category: "spacing",
+  description: "Checks that containers have consistent internal padding",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const containers = snapshot.elements.filter(
+      (el) => el.isVisible && el.childCount >= 2 && el.depth <= 4
+    );
+    const asymmetric = [];
+    for (const el of containers) {
+      const { top, right, bottom, left } = el.padding;
+      if (left > 0 && right > 0 && Math.abs(left - right) > 2) {
+        asymmetric.push(el.selector);
+      }
+    }
+    if (asymmetric.length > 3) {
+      findings.push({
+        ruleId: "container-padding",
+        severity: "info",
+        category: "spacing",
+        selector: asymmetric[0],
+        message: `${asymmetric.length} container(s) with asymmetric horizontal padding`,
+        measured: `${asymmetric.length} asymmetric containers`,
+        expected: "Symmetric horizontal padding on containers",
+        suggestion: "Use equal left and right padding on container elements",
+        impact: Math.min(10, asymmetric.length)
+      });
+    }
+    return findings;
+  }
+};
+function findMode(values) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const v of values) {
+    counts.set(v, (counts.get(v) ?? 0) + 1);
+  }
+  let maxCount = 0;
+  let mode = values[0];
+  for (const [val, count] of counts) {
+    if (count > maxCount) {
+      maxCount = count;
+      mode = val;
+    }
+  }
+  return mode;
+}
+
+// src/rules/whitespace.ts
+var contentDensity = {
+  id: "content-density",
+  name: "Content Density",
+  category: "spacing",
+  description: "Checks that content density is balanced \u2014 not too cramped, not too sparse",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const vh = snapshot.viewport.height;
+    const aboveFold = snapshot.elements.filter(
+      (el) => el.isVisible && el.box.y < vh && el.depth <= 4
+    );
+    if (aboveFold.length > 60) {
+      findings.push({
+        ruleId: "content-density",
+        severity: "warning",
+        category: "spacing",
+        selector: "body",
+        message: `${aboveFold.length} visible elements above the fold \u2014 page feels dense and overwhelming`,
+        measured: `${aboveFold.length} elements in viewport`,
+        expected: "20\u201350 elements above the fold for balanced density",
+        suggestion: "Reduce visual complexity above the fold. Prioritize key content and move secondary info below.",
+        impact: Math.min(12, Math.round((aboveFold.length - 50) / 5))
+      });
+    } else if (aboveFold.length < 5 && snapshot.meta.visibleElements > 10) {
+      findings.push({
+        ruleId: "content-density",
+        severity: "info",
+        category: "spacing",
+        selector: "body",
+        message: `Only ${aboveFold.length} elements above the fold \u2014 page may feel empty or lacking hierarchy`,
+        measured: `${aboveFold.length} elements in viewport`,
+        expected: "10+ elements above the fold",
+        suggestion: "Ensure meaningful content is visible without scrolling",
+        impact: 5
+      });
+    }
+    return findings;
+  }
+};
+var sectionBreathing = {
+  id: "section-breathing",
+  name: "Section Breathing Room",
+  category: "spacing",
+  description: "Checks that major sections have adequate vertical spacing between them",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const sections = snapshot.elements.filter(
+      (el) => el.isVisible && el.depth <= 2 && el.box.height > 100 && el.childCount >= 2
+    );
+    if (sections.length < 2) return findings;
+    const sorted = [...sections].sort((a, b) => a.box.y - b.box.y);
+    const tightGaps = [];
+    for (let i = 1; i < sorted.length; i++) {
+      const gap = sorted[i].box.y - (sorted[i - 1].box.y + sorted[i - 1].box.height);
+      if (gap >= 0 && gap < 32) {
+        tightGaps.push({
+          between: `${sorted[i - 1].selector} \u2192 ${sorted[i].selector}`,
+          gap: Math.round(gap)
+        });
+      }
+    }
+    if (tightGaps.length > 0) {
+      findings.push({
+        ruleId: "section-breathing",
+        severity: "warning",
+        category: "spacing",
+        selector: sorted[0].selector,
+        message: `${tightGaps.length} section gap(s) under 32px \u2014 sections feel cramped`,
+        measured: `${tightGaps.length} tight gaps (${tightGaps.map((g) => `${g.gap}px`).join(", ")})`,
+        expected: "Minimum 48\u201364px between major sections",
+        suggestion: "Add margin-bottom: 64px (or var(--space-16)) between major page sections",
+        impact: Math.min(12, tightGaps.length * 4)
+      });
+    }
+    return findings;
+  }
+};
+var textEdgePadding = {
+  id: "text-edge-padding",
+  name: "Text Edge Padding",
+  category: "spacing",
+  description: "Checks that text content has sufficient padding from container edges",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const cramped = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.textContent || el.textContent.length < 20) continue;
+      if (el.depth < 2) continue;
+      if (el.box.x < 8 && el.box.x >= 0) {
+        cramped.push(el.selector);
+      }
+      const parent = snapshot.elements.find((p) => p.selector === el.parentSelector);
+      if (parent) {
+        const leftPadding = el.box.x - parent.box.x;
+        if (leftPadding < 8 && leftPadding >= 0 && parent.padding.left < 8) {
+          cramped.push(el.selector);
+        }
+      }
+    }
+    const unique = [...new Set(cramped)];
+    if (unique.length > 3) {
+      findings.push({
+        ruleId: "text-edge-padding",
+        severity: "warning",
+        category: "spacing",
+        selector: unique[0],
+        message: `${unique.length} text element(s) with less than 8px padding from container edge`,
+        measured: `${unique.length} elements with tight edge padding`,
+        expected: "Minimum 16px padding from container edges",
+        suggestion: "Add padding to containers so text never touches edges. Use min 16px horizontal padding.",
+        impact: Math.min(10, unique.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var lineLength = {
+  id: "line-length",
+  name: "Line Length (Characters Per Line)",
+  category: "typography",
+  description: "Checks that text blocks have readable line lengths (45\u201385 characters)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const tooWide = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.textContent || el.textContent.length < 50) continue;
+      if (/^h[1-6]$/.test(el.tagName)) continue;
+      const fontSize = parseFloat(el.computedStyles.fontSize);
+      if (fontSize <= 0 || fontSize > 22) continue;
+      const avgCharWidth = fontSize * 0.5;
+      const charsPerLine = el.box.width / avgCharWidth;
+      if (charsPerLine > 90) {
+        tooWide.push(el.selector);
+      }
+    }
+    if (tooWide.length > 0) {
+      findings.push({
+        ruleId: "line-length",
+        severity: "warning",
+        category: "typography",
+        selector: tooWide[0],
+        message: `${tooWide.length} text block(s) exceed 90 characters per line \u2014 hurts readability`,
+        measured: `${tooWide.length} wide text blocks`,
+        expected: "45\u201375 characters per line for body text",
+        suggestion: "Constrain text containers with max-width: 65ch or max-width: 680px",
+        impact: Math.min(15, tooWide.length * 3)
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/typography.ts
+var import_protocol2 = require("@argus-design/protocol");
+var typeScale = {
+  id: "type-scale",
+  name: "Typographic Scale",
+  category: "typography",
+  description: "Checks that font sizes follow a mathematical typographic scale ratio",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const sizes = snapshot.typographyScale.map((t) => parseFloat(t.fontSize)).filter((s) => s > 0).sort((a, b) => a - b);
+    const unique = [...new Set(sizes)];
+    if (unique.length < 3) return findings;
+    let bestRatio = "";
+    let bestScore = 0;
+    for (const [name, ratio] of Object.entries(import_protocol2.TYPE_SCALE_RATIOS)) {
+      let matches = 0;
+      const baseSize = unique[0];
+      for (const size of unique) {
+        const steps = Math.log(size / baseSize) / Math.log(ratio);
+        if (Math.abs(steps - Math.round(steps)) < 0.15) {
+          matches++;
+        }
+      }
+      const score2 = matches / unique.length;
+      if (score2 > bestScore) {
+        bestScore = score2;
+        bestRatio = name;
+      }
+    }
+    if (bestScore < 0.5) {
+      findings.push({
+        ruleId: "type-scale",
+        severity: "warning",
+        category: "typography",
+        selector: "body",
+        message: `Font sizes don't follow a consistent typographic scale. Found ${unique.length} distinct sizes: ${unique.map((s) => `${s}px`).join(", ")}`,
+        measured: `${unique.length} sizes, best scale fit: ${Math.round(bestScore * 100)}%`,
+        expected: "Sizes following a mathematical ratio (e.g., 1.25 major third)",
+        suggestion: `Consider adopting a ${bestRatio || "major third (1.25)"} scale from your base size of ${unique[0]}px`,
+        impact: Math.min(20, Math.round((1 - bestScore) * 25))
+      });
+    }
+    return findings;
+  }
+};
+var fontSizeVariety = {
+  id: "font-size-variety",
+  name: "Font Size Variety",
+  category: "typography",
+  description: "Checks the page uses a reasonable number of distinct font sizes",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const distinct = new Set(
+      snapshot.typographyScale.map((t) => t.fontSize)
+    ).size;
+    if (distinct > 8) {
+      findings.push({
+        ruleId: "font-size-variety",
+        severity: "warning",
+        category: "typography",
+        selector: "body",
+        message: `${distinct} distinct font sizes found \u2014 too many for a coherent type system`,
+        measured: distinct,
+        expected: "4\u20137 distinct font sizes",
+        suggestion: "Consolidate to a type scale with 5-6 sizes: caption, body, subheading, heading, display",
+        impact: Math.min(15, (distinct - 7) * 3)
+      });
+    } else {
+      findings.push({
+        ruleId: "font-size-variety",
+        severity: "pass",
+        category: "typography",
+        selector: "body",
+        message: `${distinct} distinct font sizes \u2014 good typographic discipline`,
+        measured: distinct,
+        expected: "4\u20137 distinct font sizes",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var fontWeightUsage = {
+  id: "font-weight-usage",
+  name: "Font Weight Usage",
+  category: "typography",
+  description: "Checks that font weights create clear visual hierarchy",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const weights = new Set(
+      snapshot.typographyScale.map((t) => t.fontWeight)
+    );
+    if (weights.size > 4) {
+      findings.push({
+        ruleId: "font-weight-usage",
+        severity: "info",
+        category: "typography",
+        selector: "body",
+        message: `${weights.size} distinct font weights used (${[...weights].join(", ")})`,
+        measured: weights.size,
+        expected: "2\u20133 distinct weights (regular, medium/semibold, bold)",
+        suggestion: "Simplify to 2-3 weights for clearer hierarchy: 400 (body), 500/600 (emphasis), 700 (headings)",
+        impact: Math.min(10, (weights.size - 3) * 3)
+      });
+    }
+    return findings;
+  }
+};
+var lineHeightReadability = {
+  id: "line-height",
+  name: "Line Height Readability",
+  category: "typography",
+  description: "Checks that line heights fall within readable ranges",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const tight = [];
+    const loose = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.textContent || el.textContent.length < 10) continue;
+      const fontSize = parseFloat(el.computedStyles.fontSize);
+      const lineHeight = parseFloat(el.computedStyles.lineHeight);
+      if (fontSize <= 0 || lineHeight <= 0) continue;
+      const ratio = lineHeight / fontSize;
+      if (fontSize <= 20) {
+        if (ratio < 1.3) tight.push(el.selector);
+        if (ratio > 2.2) loose.push(el.selector);
+      }
+    }
+    if (tight.length > 0) {
+      findings.push({
+        ruleId: "line-height",
+        severity: "warning",
+        category: "typography",
+        selector: tight[0],
+        message: `${tight.length} text element(s) with tight line-height (< 1.3x font size)`,
+        measured: `${tight.length} elements below 1.3 ratio`,
+        expected: "Line-height 1.4\u20131.8x for body text",
+        suggestion: "Increase line-height to at least 1.5 for readable body text",
+        impact: Math.min(15, tight.length * 3)
+      });
+    }
+    if (findings.length === 0) {
+      findings.push({
+        ruleId: "line-height",
+        severity: "pass",
+        category: "typography",
+        selector: "body",
+        message: "Line heights are within readable ranges",
+        measured: "All within range",
+        expected: "1.3\u20132.0 ratio",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var fontFamilyCount = {
+  id: "font-family-count",
+  name: "Font Family Count",
+  category: "typography",
+  description: "Checks that the page uses a reasonable number of font families",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const count = snapshot.meta.fontFamilyCount;
+    if (count > 3) {
+      findings.push({
+        ruleId: "font-family-count",
+        severity: "warning",
+        category: "typography",
+        selector: "body",
+        message: `${count} distinct font families used \u2014 consider consolidating`,
+        measured: count,
+        expected: "1\u20133 font families",
+        suggestion: "Use one display font and one body font. A third for monospace if needed.",
+        impact: Math.min(12, (count - 3) * 4)
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/color.ts
+var colorPaletteSize = {
+  id: "color-palette-size",
+  name: "Color Palette Size",
+  category: "color",
+  description: "Checks that the page uses a focused color palette",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const textColors = snapshot.colorPalette.filter((c) => c.usage === "text");
+    const bgColors = snapshot.colorPalette.filter((c) => c.usage === "background");
+    if (textColors.length > 8) {
+      findings.push({
+        ruleId: "color-palette-size",
+        severity: "warning",
+        category: "color",
+        selector: "body",
+        message: `${textColors.length} distinct text colors \u2014 suggests an unfocused palette`,
+        measured: textColors.length,
+        expected: "3\u20136 text colors (primary, secondary, muted, accent, error, success)",
+        suggestion: "Define text color tokens and apply them consistently via CSS custom properties",
+        impact: Math.min(15, (textColors.length - 6) * 2)
+      });
+    }
+    if (bgColors.length > 10) {
+      findings.push({
+        ruleId: "color-palette-size",
+        severity: "info",
+        category: "color",
+        selector: "body",
+        message: `${bgColors.length} distinct background colors found`,
+        measured: bgColors.length,
+        expected: "4\u20138 background colors",
+        suggestion: "Consolidate background colors to a defined surface palette",
+        impact: Math.min(10, (bgColors.length - 8) * 1.5)
+      });
+    }
+    if (findings.length === 0) {
+      findings.push({
+        ruleId: "color-palette-size",
+        severity: "pass",
+        category: "color",
+        selector: "body",
+        message: "Color palette is focused and consistent",
+        measured: `${textColors.length} text, ${bgColors.length} background colors`,
+        expected: "Focused palette",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var contrastCompliance = {
+  id: "contrast-compliance",
+  name: "Contrast Compliance",
+  category: "color",
+  description: "Checks WCAG contrast ratios for text elements",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const failing = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.textContent) continue;
+      if (el.accessibility.wcagLevel === "fail") {
+        failing.push(el.selector);
+      }
+    }
+    if (failing.length > 0) {
+      findings.push({
+        ruleId: "contrast-compliance",
+        severity: "error",
+        category: "color",
+        selector: failing[0],
+        message: `${failing.length} element(s) fail WCAG AA contrast requirements`,
+        measured: `${failing.length} failures`,
+        expected: "0 contrast failures",
+        suggestion: "Increase text-to-background contrast ratio to at least 4.5:1 (3:1 for large text)",
+        impact: Math.min(25, failing.length * 5)
+      });
+    } else {
+      findings.push({
+        ruleId: "contrast-compliance",
+        severity: "pass",
+        category: "color",
+        selector: "body",
+        message: "All text elements pass WCAG AA contrast requirements",
+        measured: "0 failures",
+        expected: "0 failures",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var colorConsistency = {
+  id: "color-consistency",
+  name: "Color Value Consistency",
+  category: "color",
+  description: "Checks for near-duplicate colors that should be unified",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const colors = snapshot.colorPalette.filter((c) => c.count >= 2);
+    const nearDupes = [];
+    for (let i = 0; i < colors.length; i++) {
+      for (let j = i + 1; j < colors.length; j++) {
+        if (areNearDuplicate(colors[i].value, colors[j].value)) {
+          nearDupes.push({ a: colors[i].value, b: colors[j].value });
+        }
+      }
+    }
+    if (nearDupes.length > 0) {
+      findings.push({
+        ruleId: "color-consistency",
+        severity: "info",
+        category: "color",
+        selector: "body",
+        message: `${nearDupes.length} near-duplicate color pair(s) found that could be unified`,
+        measured: `${nearDupes.length} near-duplicates`,
+        expected: "0 near-duplicate colors",
+        suggestion: `Consider unifying: ${nearDupes.slice(0, 3).map((d) => `${d.a} \u2248 ${d.b}`).join("; ")}`,
+        impact: Math.min(8, nearDupes.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var pureBlackAvoidance = {
+  id: "pure-black-avoidance",
+  name: "Pure Black Text Avoidance",
+  category: "color",
+  description: "Checks that text doesn't use pure black (#000000) on white backgrounds",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const pureBlack = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.textContent) continue;
+      const color = el.computedStyles.color;
+      if (color === "rgb(0, 0, 0)" || color === "#000000" || color === "#000") {
+        pureBlack.push(el.selector);
+      }
+    }
+    if (pureBlack.length > 5) {
+      findings.push({
+        ruleId: "pure-black-avoidance",
+        severity: "info",
+        category: "color",
+        selector: pureBlack[0],
+        message: `${pureBlack.length} element(s) use pure black (#000) text \u2014 can feel harsh on white backgrounds`,
+        measured: `${pureBlack.length} elements with #000`,
+        expected: "Softened dark color (e.g., #1a1a1a, #111827)",
+        suggestion: "Use a slightly softened dark color like #1a1a1a or #111827 instead of pure black",
+        impact: 5
+      });
+    }
+    return findings;
+  }
+};
+function areNearDuplicate(a, b) {
+  const rgbA = extractRGB(a);
+  const rgbB = extractRGB(b);
+  if (!rgbA || !rgbB) return false;
+  const distance = Math.sqrt(
+    (rgbA.r - rgbB.r) ** 2 + (rgbA.g - rgbB.g) ** 2 + (rgbA.b - rgbB.b) ** 2
+  );
+  return distance > 0 && distance < 15;
+}
+function extractRGB(color) {
+  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (match) {
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10)
+    };
+  }
+  return null;
+}
+
+// src/rules/media.ts
+var imageDimensions = {
+  id: "image-dimensions",
+  name: "Image Dimension Attributes",
+  category: "consistency",
+  description: "Checks that images have explicit width/height attributes to prevent cumulative layout shift",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const missing = [];
+    for (const el of snapshot.elements) {
+      if (el.tagName !== "img" || !el.isVisible) continue;
+      const hasWidth = el.attributes["width"] !== void 0;
+      const hasHeight = el.attributes["height"] !== void 0;
+      const hasCSSSize = el.computedStyles.width !== "auto" || el.computedStyles.height !== "auto";
+      if (!hasWidth && !hasHeight && !hasCSSSize) {
+        missing.push(el.selector);
+      }
+    }
+    if (missing.length > 0) {
+      findings.push({
+        ruleId: "image-dimensions",
+        severity: "warning",
+        category: "consistency",
+        selector: missing[0],
+        message: `${missing.length} image(s) without explicit dimensions \u2014 causes cumulative layout shift (CLS)`,
+        measured: `${missing.length} images without dimensions`,
+        expected: "width and height attributes on all images",
+        suggestion: "Add width and height attributes to <img> tags or set explicit CSS dimensions",
+        impact: Math.min(12, missing.length * 3)
+      });
+    }
+    return findings;
+  }
+};
+var imageContainment = {
+  id: "image-containment",
+  name: "Image Container Overflow",
+  category: "spacing",
+  description: "Checks that images don't overflow their parent containers",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const overflowing = [];
+    for (const el of snapshot.elements) {
+      if (el.tagName !== "img" || !el.isVisible) continue;
+      if (!el.parentSelector) continue;
+      const parent = snapshot.elements.find((p) => p.selector === el.parentSelector);
+      if (!parent) continue;
+      if (el.box.width > parent.box.width + 2) {
+        overflowing.push(el.selector);
+      }
+    }
+    if (overflowing.length > 0) {
+      findings.push({
+        ruleId: "image-containment",
+        severity: "warning",
+        category: "spacing",
+        selector: overflowing[0],
+        message: `${overflowing.length} image(s) overflow their parent container`,
+        measured: `${overflowing.length} overflowing images`,
+        expected: "All images contained within parent bounds",
+        suggestion: "Add max-width: 100% and height: auto to images, or use object-fit: cover with fixed dimensions",
+        impact: Math.min(10, overflowing.length * 3)
+      });
+    }
+    return findings;
+  }
+};
+var imageAspectConsistency = {
+  id: "image-aspect-consistency",
+  name: "Image Aspect Ratio Consistency",
+  category: "consistency",
+  description: "Checks that sibling images share consistent aspect ratios",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const parentMap = /* @__PURE__ */ new Map();
+    for (const el of snapshot.elements) {
+      if (el.tagName !== "img" || !el.isVisible || !el.parentSelector) continue;
+      const siblings = parentMap.get(el.parentSelector) ?? [];
+      siblings.push(el);
+      parentMap.set(el.parentSelector, siblings);
+    }
+    for (const [parentSelector, images] of parentMap) {
+      if (images.length < 3) continue;
+      const ratios = images.map((img) => {
+        if (img.box.height === 0) return 0;
+        return Math.round(img.box.width / img.box.height * 100) / 100;
+      }).filter((r) => r > 0);
+      if (ratios.length < 3) continue;
+      const uniqueRatios = new Set(ratios.map((r) => Math.round(r * 10)));
+      if (uniqueRatios.size > 2) {
+        findings.push({
+          ruleId: "image-aspect-consistency",
+          severity: "info",
+          category: "consistency",
+          selector: parentSelector,
+          message: `${uniqueRatios.size} different aspect ratios among ${images.length} sibling images \u2014 grid looks uneven`,
+          measured: `${uniqueRatios.size} aspect ratios`,
+          expected: "Consistent aspect ratios for sibling images",
+          suggestion: "Use object-fit: cover with fixed aspect-ratio on image containers for uniform grid appearance",
+          impact: Math.min(8, (uniqueRatios.size - 1) * 3)
+        });
+      }
+    }
+    return findings;
+  }
+};
+var iconButtonSize = {
+  id: "icon-button-size",
+  name: "Icon Button Proportions",
+  category: "hierarchy",
+  description: "Checks that icon-only buttons aren't excessively large or tiny",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const oversized = [];
+    const undersized = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.isInteractive) continue;
+      if (el.textContent.length > 3) continue;
+      if (el.tagName !== "button" && el.tagName !== "a") continue;
+      const size = Math.max(el.box.width, el.box.height);
+      if (size > 64) oversized.push(el.selector);
+      if (size > 0 && size < 24) undersized.push(el.selector);
+    }
+    if (oversized.length > 2) {
+      findings.push({
+        ruleId: "icon-button-size",
+        severity: "info",
+        category: "hierarchy",
+        selector: oversized[0],
+        message: `${oversized.length} icon button(s) larger than 64px \u2014 may overwhelm surrounding content`,
+        measured: `${oversized.length} oversized buttons`,
+        expected: "32\u201348px for icon-only buttons",
+        suggestion: "Size icon buttons to 36\u201344px for optimal visual weight and touch target balance",
+        impact: Math.min(5, oversized.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var colorOnlyInformation = {
+  id: "color-only-information",
+  name: "Color-Only Information",
+  category: "accessibility",
+  description: "Checks for potential reliance on color alone to convey meaning (WCAG 1.4.1)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const statusIndicators = snapshot.elements.filter((el) => {
+      if (!el.isVisible || el.textContent.length > 1) return false;
+      const bg = el.computedStyles.backgroundColor;
+      return el.box.width < 20 && el.box.height < 20 && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)";
+    });
+    if (statusIndicators.length > 3) {
+      findings.push({
+        ruleId: "color-only-information",
+        severity: "info",
+        category: "accessibility",
+        selector: statusIndicators[0].selector,
+        message: `${statusIndicators.length} small colored elements detected \u2014 ensure color isn't the only way to convey information`,
+        measured: `${statusIndicators.length} potential color-only indicators`,
+        expected: "Color paired with icons, text, or patterns",
+        suggestion: "Add icons, text labels, or patterns alongside color to ensure information is accessible to colorblind users",
+        impact: 5
+      });
+    }
+    return findings;
+  }
+};
+var linkDistinguishability = {
+  id: "link-distinguishability",
+  name: "Link Visual Distinction",
+  category: "color",
+  description: "Checks that links are visually distinguishable from surrounding text",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const indistinguishable = [];
+    for (const el of snapshot.elements) {
+      if (el.tagName !== "a" || !el.isVisible || !el.textContent) continue;
+      if (!el.parentSelector) continue;
+      const parent = snapshot.elements.find((p) => p.selector === el.parentSelector);
+      if (!parent) continue;
+      const sameColor = el.computedStyles.color === parent.computedStyles.color;
+      const noUnderline = !el.computedStyles.textDecoration.includes("underline");
+      const noBold = el.computedStyles.fontWeight === parent.computedStyles.fontWeight;
+      if (sameColor && noUnderline && noBold) {
+        indistinguishable.push(el.selector);
+      }
+    }
+    if (indistinguishable.length > 2) {
+      findings.push({
+        ruleId: "link-distinguishability",
+        severity: "warning",
+        category: "color",
+        selector: indistinguishable[0],
+        message: `${indistinguishable.length} link(s) visually identical to surrounding text \u2014 users can't tell they're clickable`,
+        measured: `${indistinguishable.length} indistinguishable links`,
+        expected: "Links distinguished by color, underline, or weight",
+        suggestion: "Make links visually distinct with color + underline on hover, or always-visible underline",
+        impact: Math.min(12, indistinguishable.length * 3)
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/hierarchy.ts
+var headingSizeProgression = {
+  id: "heading-size-progression",
+  name: "Heading Size Progression",
+  category: "hierarchy",
+  description: "Checks that heading sizes decrease progressively (h1 > h2 > h3)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const headingsByLevel = /* @__PURE__ */ new Map();
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !/^h[1-6]$/.test(el.tagName)) continue;
+      const level = parseInt(el.tagName[1], 10);
+      const size = parseFloat(el.computedStyles.fontSize);
+      if (size > 0) {
+        const sizes = headingsByLevel.get(level) ?? [];
+        sizes.push(size);
+        headingsByLevel.set(level, sizes);
+      }
+    }
+    const levels = [...headingsByLevel.keys()].sort((a, b) => a - b);
+    const violations = [];
+    for (let i = 1; i < levels.length; i++) {
+      const prevLevel = levels[i - 1];
+      const currLevel = levels[i];
+      const prevSizes = headingsByLevel.get(prevLevel);
+      const currSizes = headingsByLevel.get(currLevel);
+      const prevAvg = prevSizes.reduce((a, b) => a + b, 0) / prevSizes.length;
+      const currAvg = currSizes.reduce((a, b) => a + b, 0) / currSizes.length;
+      if (currAvg >= prevAvg) {
+        violations.push(`h${currLevel} (${Math.round(currAvg)}px) >= h${prevLevel} (${Math.round(prevAvg)}px)`);
+      }
+    }
+    if (violations.length > 0) {
+      findings.push({
+        ruleId: "heading-size-progression",
+        severity: "error",
+        category: "hierarchy",
+        selector: "body",
+        message: `Heading size hierarchy is broken: ${violations.join("; ")}`,
+        measured: violations.join("; "),
+        expected: "h1 > h2 > h3 > h4 in font size",
+        suggestion: "Ensure each heading level is visually smaller than the level above it",
+        impact: Math.min(20, violations.length * 8)
+      });
+    } else if (levels.length >= 2) {
+      findings.push({
+        ruleId: "heading-size-progression",
+        severity: "pass",
+        category: "hierarchy",
+        selector: "body",
+        message: "Heading sizes progress correctly through levels",
+        measured: "Correct progression",
+        expected: "h1 > h2 > h3",
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var ctaDominance = {
+  id: "cta-dominance",
+  name: "CTA Visual Dominance",
+  category: "hierarchy",
+  description: "Checks that primary CTAs are visually dominant on the page",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const buttons = snapshot.elements.filter(
+      (el) => el.isVisible && el.isInteractive && (el.tagName === "button" || el.tagName === "a") && el.textContent.length > 0 && el.textContent.length < 30
+    );
+    if (buttons.length === 0) return findings;
+    const areas = buttons.map((b) => b.box.width * b.box.height);
+    if (areas.length >= 2) {
+      const maxArea = Math.max(...areas);
+      const minArea = Math.min(...areas);
+      const ratio = maxArea / (minArea || 1);
+      if (ratio < 1.2 && buttons.length >= 3) {
+        findings.push({
+          ruleId: "cta-dominance",
+          severity: "info",
+          category: "hierarchy",
+          selector: buttons[0].selector,
+          message: `${buttons.length} buttons with similar visual weight \u2014 no clear primary CTA`,
+          measured: `Size ratio: ${ratio.toFixed(2)}`,
+          expected: "Primary CTA at least 1.3x larger than secondary actions",
+          suggestion: "Make the primary CTA visually distinct with larger size, stronger color, or bolder weight",
+          impact: 8
+        });
+      }
+    }
+    return findings;
+  }
+};
+var visualWeightDistribution = {
+  id: "visual-weight-distribution",
+  name: "Visual Weight Distribution",
+  category: "hierarchy",
+  description: "Checks that visual weight is distributed to create clear focal points",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const viewportHeight = snapshot.viewport.height;
+    const aboveFold = snapshot.elements.filter(
+      (el) => el.isVisible && el.box.y < viewportHeight
+    );
+    if (aboveFold.length === 0) return findings;
+    const textElements = aboveFold.filter(
+      (el) => el.textContent.length > 0
+    );
+    const maxFontSize = Math.max(
+      ...textElements.map((el) => parseFloat(el.computedStyles.fontSize) || 0)
+    );
+    if (maxFontSize < 24 && textElements.length > 5) {
+      findings.push({
+        ruleId: "visual-weight-distribution",
+        severity: "info",
+        category: "hierarchy",
+        selector: "body",
+        message: `No text above 24px found above the fold \u2014 weak visual hierarchy`,
+        measured: `Largest text: ${Math.round(maxFontSize)}px`,
+        expected: "At least one prominent heading (24px+) above the fold",
+        suggestion: "Add a larger heading or hero text to establish visual hierarchy above the fold",
+        impact: 10
+      });
+    }
+    return findings;
+  }
+};
+var headingLevelStructure = {
+  id: "heading-level-structure",
+  name: "Heading Level Structure",
+  category: "hierarchy",
+  description: "Checks that heading levels are properly nested without skips",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const headings = snapshot.elements.filter((el) => /^h[1-6]$/.test(el.tagName) && el.isVisible).sort((a, b) => a.box.y - b.box.y);
+    const skips = [];
+    for (let i = 1; i < headings.length; i++) {
+      const prev = parseInt(headings[i - 1].tagName[1], 10);
+      const curr = parseInt(headings[i].tagName[1], 10);
+      if (curr > prev + 1) {
+        skips.push(`h${prev} \u2192 h${curr}`);
+      }
+    }
+    if (skips.length > 0) {
+      findings.push({
+        ruleId: "heading-level-structure",
+        severity: "warning",
+        category: "hierarchy",
+        selector: headings[0]?.selector ?? "body",
+        message: `Heading levels skip: ${skips.join(", ")}`,
+        measured: `${skips.length} level skip(s)`,
+        expected: "Sequential heading levels (h1 \u2192 h2 \u2192 h3)",
+        suggestion: "Use sequential heading levels. Don't skip from h2 to h4.",
+        impact: Math.min(12, skips.length * 4)
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/interaction.ts
+var cursorAffordance = {
+  id: "cursor-affordance",
+  name: "Cursor Affordance",
+  category: "consistency",
+  description: "Checks that interactive elements show pointer cursor to signal clickability",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const missingPointer = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.isInteractive) continue;
+      if (el.tagName === "input" || el.tagName === "select" || el.tagName === "textarea") continue;
+      if (el.computedStyles.cursor !== "pointer") {
+        missingPointer.push(el.selector);
+      }
+    }
+    if (missingPointer.length > 0) {
+      findings.push({
+        ruleId: "cursor-affordance",
+        severity: "info",
+        category: "consistency",
+        selector: missingPointer[0],
+        message: `${missingPointer.length} interactive element(s) without cursor:pointer \u2014 users can't tell they're clickable`,
+        measured: `${missingPointer.length} missing cursor:pointer`,
+        expected: "cursor:pointer on all clickable elements",
+        suggestion: "Add cursor: pointer to all interactive elements (buttons, links, cards with click handlers)",
+        impact: Math.min(8, missingPointer.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var transitionPresence = {
+  id: "transition-presence",
+  name: "Transition Presence",
+  category: "consistency",
+  description: "Checks that interactive elements have CSS transitions for hover/active states",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const noTransition = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.isInteractive) continue;
+      if (el.tagName === "input" || el.tagName === "select") continue;
+      const transition = el.computedStyles.transition;
+      if (!transition || transition === "none" || transition === "all 0s ease 0s") {
+        noTransition.push(el.selector);
+      }
+    }
+    if (noTransition.length > 5) {
+      findings.push({
+        ruleId: "transition-presence",
+        severity: "info",
+        category: "consistency",
+        selector: noTransition[0],
+        message: `${noTransition.length} interactive elements without CSS transitions \u2014 state changes feel abrupt`,
+        measured: `${noTransition.length} without transitions`,
+        expected: "Smooth transitions on interactive elements",
+        suggestion: "Add transition: all 0.15s ease or transition: background-color 0.15s, transform 0.1s",
+        impact: Math.min(6, Math.round(noTransition.length / 3))
+      });
+    }
+    return findings;
+  }
+};
+var transitionTiming = {
+  id: "transition-timing",
+  name: "Transition Timing",
+  category: "consistency",
+  description: "Checks that transition durations are in the optimal 100\u2013400ms range",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const tooSlow = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const transition = el.computedStyles.transition;
+      if (!transition || transition === "none") continue;
+      const durationMatch = transition.match(/([\d.]+)s/);
+      if (durationMatch) {
+        const duration = parseFloat(durationMatch[1]) * 1e3;
+        if (duration > 500) {
+          tooSlow.push(el.selector);
+        }
+      }
+    }
+    if (tooSlow.length > 2) {
+      findings.push({
+        ruleId: "transition-timing",
+        severity: "info",
+        category: "consistency",
+        selector: tooSlow[0],
+        message: `${tooSlow.length} element(s) with transitions > 500ms \u2014 feels sluggish`,
+        measured: `${tooSlow.length} slow transitions`,
+        expected: "100\u2013300ms for UI transitions, max 400ms for complex animations",
+        suggestion: "Keep UI transitions under 300ms. Use 150ms for hover, 200ms for state changes, 300ms for layout shifts.",
+        impact: Math.min(6, tooSlow.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var inputAffordance = {
+  id: "input-affordance",
+  name: "Input Visual Affordance",
+  category: "hierarchy",
+  description: "Checks that form inputs are visually distinguishable from surrounding content",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const invisibleInputs = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      if (el.tagName !== "input" && el.tagName !== "textarea") continue;
+      if (el.attributes["type"] === "hidden" || el.attributes["type"] === "submit") continue;
+      const hasBorder = el.computedStyles.borderWidth !== "0px" && el.computedStyles.borderStyle !== "none";
+      const hasBg = el.computedStyles.backgroundColor !== "transparent" && el.computedStyles.backgroundColor !== "rgba(0, 0, 0, 0)";
+      const hasShadow = el.computedStyles.boxShadow !== "none" && el.computedStyles.boxShadow !== "";
+      if (!hasBorder && !hasBg && !hasShadow) {
+        invisibleInputs.push(el.selector);
+      }
+    }
+    if (invisibleInputs.length > 0) {
+      findings.push({
+        ruleId: "input-affordance",
+        severity: "warning",
+        category: "hierarchy",
+        selector: invisibleInputs[0],
+        message: `${invisibleInputs.length} form input(s) with no visible border, background, or shadow \u2014 hard to identify as inputs`,
+        measured: `${invisibleInputs.length} invisible inputs`,
+        expected: "Visible border, background, or shadow on all form inputs",
+        suggestion: "Add a visible border (1px solid) or background color to distinguish inputs from surrounding content",
+        impact: Math.min(12, invisibleInputs.length * 4)
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/accessibility.ts
+var import_protocol3 = require("@argus-design/protocol");
+var imageAltText = {
+  id: "image-alt-text",
+  name: "Image Alt Text",
+  category: "accessibility",
+  description: "Checks that all images have alt attributes",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const missing = snapshot.elements.filter(
+      (el) => el.tagName === "img" && el.isVisible && el.accessibility.hasAltText === false
+    );
+    if (missing.length > 0) {
+      findings.push({
+        ruleId: "image-alt-text",
+        severity: "error",
+        category: "accessibility",
+        selector: missing[0].selector,
+        message: `${missing.length} image(s) missing alt attribute`,
+        measured: missing.length,
+        expected: 0,
+        suggestion: 'Add descriptive alt text to every image. Use alt="" for decorative images.',
+        impact: Math.min(20, missing.length * 5)
+      });
+    } else {
+      findings.push({
+        ruleId: "image-alt-text",
+        severity: "pass",
+        category: "accessibility",
+        selector: "body",
+        message: "All images have alt attributes",
+        measured: 0,
+        expected: 0,
+        suggestion: "",
+        impact: 0
+      });
+    }
+    return findings;
+  }
+};
+var touchTargetSize = {
+  id: "touch-target-size",
+  name: "Touch Target Size",
+  category: "accessibility",
+  description: `Checks interactive elements meet minimum ${import_protocol3.TOUCH_TARGETS.minimum}px touch target size`,
+  evaluate: (snapshot) => {
+    const findings = [];
+    const tooSmall = snapshot.elements.filter((el) => {
+      if (!el.isInteractive || !el.isVisible) return false;
+      return Math.min(el.box.width, el.box.height) < import_protocol3.TOUCH_TARGETS.minimum && Math.min(el.box.width, el.box.height) > 0;
+    });
+    if (tooSmall.length > 0) {
+      findings.push({
+        ruleId: "touch-target-size",
+        severity: "warning",
+        category: "accessibility",
+        selector: tooSmall[0].selector,
+        message: `${tooSmall.length} interactive element(s) below ${import_protocol3.TOUCH_TARGETS.minimum}px minimum`,
+        measured: `${tooSmall.length} undersized targets`,
+        expected: `All targets >= ${import_protocol3.TOUCH_TARGETS.minimum}px (recommended: ${import_protocol3.TOUCH_TARGETS.recommended}px)`,
+        suggestion: `Increase clickable area to at least ${import_protocol3.TOUCH_TARGETS.recommended}x${import_protocol3.TOUCH_TARGETS.recommended}px`,
+        impact: Math.min(15, tooSmall.length * 3)
+      });
+    }
+    return findings;
+  }
+};
+var landmarkPresence = {
+  id: "landmark-presence",
+  name: "Landmark Regions",
+  category: "accessibility",
+  description: "Checks for essential landmark regions (main, nav)",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const hasMain = snapshot.elements.some(
+      (el) => el.tagName === "main" || el.accessibility.role === "main"
+    );
+    const hasNav = snapshot.elements.some(
+      (el) => el.tagName === "nav" || el.accessibility.role === "navigation"
+    );
+    if (!hasMain) {
+      findings.push({
+        ruleId: "landmark-presence",
+        severity: "warning",
+        category: "accessibility",
+        selector: "body",
+        message: "Missing <main> landmark region",
+        measured: "No main landmark",
+        expected: "At least one <main> element",
+        suggestion: "Wrap primary content in a <main> element",
+        impact: 8
+      });
+    }
+    if (!hasNav && snapshot.meta.linkCount > 3) {
+      findings.push({
+        ruleId: "landmark-presence",
+        severity: "info",
+        category: "accessibility",
+        selector: "body",
+        message: "Missing <nav> landmark region",
+        measured: "No nav landmark",
+        expected: "At least one <nav> element for navigation links",
+        suggestion: "Wrap navigation links in a <nav> element",
+        impact: 5
+      });
+    }
+    return findings;
+  }
+};
+var documentLanguage = {
+  id: "document-language",
+  name: "Document Language",
+  category: "accessibility",
+  description: "Checks that the document has a lang attribute",
+  evaluate: (snapshot) => {
+    const findings = [];
+    if (!snapshot.lang) {
+      findings.push({
+        ruleId: "document-language",
+        severity: "error",
+        category: "accessibility",
+        selector: "html",
+        message: "Document missing lang attribute",
+        measured: "No lang attribute",
+        expected: 'lang attribute on <html> (e.g., lang="en")',
+        suggestion: 'Add lang="en" (or appropriate language code) to the <html> element',
+        impact: 10
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/semantic.ts
+var semanticInteractive = {
+  id: "semantic-interactive",
+  name: "Semantic Interactive Elements",
+  category: "accessibility",
+  description: "Checks that interactive elements use proper semantic tags (button, a) not div/span",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const divButtons = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const tag = el.tagName;
+      if (tag !== "div" && tag !== "span") continue;
+      const hasClickCursor = el.computedStyles.cursor === "pointer";
+      const hasRole = el.accessibility.role === "button" || el.accessibility.role === "link";
+      const hasTabIndex = el.accessibility.tabIndex === 0;
+      if (hasClickCursor && !hasRole) {
+        divButtons.push(el.selector);
+      }
+    }
+    if (divButtons.length > 0) {
+      findings.push({
+        ruleId: "semantic-interactive",
+        severity: "error",
+        category: "accessibility",
+        selector: divButtons[0],
+        message: `${divButtons.length} element(s) with cursor:pointer but no semantic tag or role \u2014 likely clickable div/span`,
+        measured: `${divButtons.length} non-semantic interactive elements`,
+        expected: "Use <button> for actions, <a> for navigation",
+        suggestion: "Replace clickable <div>/<span> with <button> (actions) or <a href> (links). This fixes keyboard accessibility automatically.",
+        impact: Math.min(20, divButtons.length * 4)
+      });
+    }
+    return findings;
+  }
+};
+var semanticLists = {
+  id: "semantic-lists",
+  name: "Semantic List Structure",
+  category: "accessibility",
+  description: "Checks that repeated sibling groups use semantic list elements",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const parentMap = /* @__PURE__ */ new Map();
+    for (const el of snapshot.elements) {
+      if (!el.parentSelector || !el.isVisible) continue;
+      const siblings = parentMap.get(el.parentSelector) ?? [];
+      siblings.push(el);
+      parentMap.set(el.parentSelector, siblings);
+    }
+    const divListParents = [];
+    for (const [parentSelector, children] of parentMap) {
+      if (children.length < 4) continue;
+      const allDivs = children.every((c) => c.tagName === "div");
+      const parent = snapshot.elements.find((e) => e.selector === parentSelector);
+      if (!parent) continue;
+      const isAlreadyList = parent.tagName === "ul" || parent.tagName === "ol" || parent.accessibility.role === "list";
+      if (allDivs && !isAlreadyList) {
+        const heights = children.map((c) => c.box.height);
+        const avgHeight = heights.reduce((a, b) => a + b, 0) / heights.length;
+        const deviation = heights.reduce((sum, h) => sum + Math.abs(h - avgHeight), 0) / heights.length;
+        if (deviation < avgHeight * 0.3) {
+          divListParents.push(parentSelector);
+        }
+      }
+    }
+    if (divListParents.length > 0) {
+      findings.push({
+        ruleId: "semantic-lists",
+        severity: "info",
+        category: "accessibility",
+        selector: divListParents[0],
+        message: `${divListParents.length} group(s) of repeated div siblings that may be better as <ul>/<ol> lists`,
+        measured: `${divListParents.length} potential list groups`,
+        expected: "Repeated items in <ul>/<ol> with <li> children",
+        suggestion: "Wrap repeated item groups in <ul> with <li> children for screen reader navigation",
+        impact: Math.min(8, divListParents.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var semanticTextElements = {
+  id: "semantic-text-elements",
+  name: "Semantic Text Elements",
+  category: "accessibility",
+  description: "Checks that paragraph-length text uses <p> tags, not bare <div>/<span>",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const longDivText = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      if (el.tagName !== "div" && el.tagName !== "span") continue;
+      if (el.textContent.length > 80 && el.childCount === 0) {
+        longDivText.push(el.selector);
+      }
+    }
+    if (longDivText.length > 3) {
+      findings.push({
+        ruleId: "semantic-text-elements",
+        severity: "info",
+        category: "accessibility",
+        selector: longDivText[0],
+        message: `${longDivText.length} <div>/<span> elements contain paragraph-length text \u2014 use <p> instead`,
+        measured: `${longDivText.length} non-semantic text blocks`,
+        expected: "Paragraph text in <p> elements",
+        suggestion: "Use <p> for paragraph text. Screen readers use semantic tags for navigation.",
+        impact: Math.min(6, longDivText.length)
+      });
+    }
+    return findings;
+  }
+};
+var emptyInteractiveElements = {
+  id: "empty-interactive",
+  name: "Empty Interactive Elements",
+  category: "accessibility",
+  description: "Checks that all buttons and links have accessible text content",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const empty = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.isInteractive) continue;
+      if (el.tagName !== "button" && el.tagName !== "a") continue;
+      const hasText = el.textContent.trim().length > 0;
+      const hasAriaLabel = el.accessibility.ariaLabel !== null;
+      const hasTitle = el.attributes["title"] !== void 0;
+      if (!hasText && !hasAriaLabel && !hasTitle) {
+        empty.push(el.selector);
+      }
+    }
+    if (empty.length > 0) {
+      findings.push({
+        ruleId: "empty-interactive",
+        severity: "error",
+        category: "accessibility",
+        selector: empty[0],
+        message: `${empty.length} button(s)/link(s) with no text, aria-label, or title \u2014 invisible to screen readers`,
+        measured: `${empty.length} empty interactive elements`,
+        expected: "All interactive elements have accessible text",
+        suggestion: "Add text content, aria-label, or title to every button and link",
+        impact: Math.min(20, empty.length * 5)
+      });
+    }
+    return findings;
+  }
+};
+var tableStructure = {
+  id: "table-structure",
+  name: "Table Structure",
+  category: "accessibility",
+  description: "Checks that data tables use <th> headers and have captions",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const tables = snapshot.elements.filter(
+      (el) => el.tagName === "table" && el.isVisible
+    );
+    for (const table of tables) {
+      const children = snapshot.elements.filter(
+        (el) => el.parentSelector === table.selector
+      );
+      const hasHeaders = snapshot.elements.some(
+        (el) => el.tagName === "th" && isDescendant(el, table.selector, snapshot.elements)
+      );
+      if (!hasHeaders) {
+        findings.push({
+          ruleId: "table-structure",
+          severity: "warning",
+          category: "accessibility",
+          selector: table.selector,
+          message: "Data table missing <th> header cells",
+          measured: "No <th> found",
+          expected: "Column/row headers using <th> with scope attribute",
+          suggestion: "Add <th scope='col'> for column headers and <th scope='row'> for row headers",
+          impact: 8
+        });
+      }
+    }
+    return findings;
+  }
+};
+function isDescendant(el, ancestorSelector, allElements) {
+  let current = el.parentSelector;
+  let depth = 0;
+  while (current && depth < 10) {
+    if (current === ancestorSelector) return true;
+    const parent = allElements.find((e) => e.selector === current);
+    current = parent?.parentSelector ?? null;
+    depth++;
+  }
+  return false;
+}
+
+// src/rules/consistency.ts
+var borderRadiusConsistency = {
+  id: "border-radius-consistency",
+  name: "Border Radius Consistency",
+  category: "consistency",
+  description: "Checks that border-radius values follow a consistent scale",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const radii = /* @__PURE__ */ new Set();
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const br = el.computedStyles.borderRadius;
+      if (br && br !== "0px") {
+        radii.add(br);
+      }
+    }
+    if (radii.size > 5) {
+      findings.push({
+        ruleId: "border-radius-consistency",
+        severity: "warning",
+        category: "consistency",
+        selector: "body",
+        message: `${radii.size} distinct border-radius values found: ${[...radii].slice(0, 6).join(", ")}`,
+        measured: radii.size,
+        expected: "2\u20134 distinct values (small, medium, large, round)",
+        suggestion: "Consolidate border-radius values to a scale: 4px (subtle), 8px (card), 12px (modal), 9999px (pill)",
+        impact: Math.min(12, (radii.size - 4) * 3)
+      });
+    }
+    return findings;
+  }
+};
+var shadowConsistency = {
+  id: "shadow-consistency",
+  name: "Box Shadow Consistency",
+  category: "consistency",
+  description: "Checks that box-shadow values are reused consistently",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const shadows = /* @__PURE__ */ new Map();
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const shadow = el.computedStyles.boxShadow;
+      if (shadow && shadow !== "none") {
+        shadows.set(shadow, (shadows.get(shadow) ?? 0) + 1);
+      }
+    }
+    if (shadows.size > 4) {
+      findings.push({
+        ruleId: "shadow-consistency",
+        severity: "info",
+        category: "consistency",
+        selector: "body",
+        message: `${shadows.size} distinct box-shadow values \u2014 consider consolidating to an elevation scale`,
+        measured: shadows.size,
+        expected: "2\u20134 shadow levels (sm, md, lg, xl)",
+        suggestion: "Define shadow tokens for consistent elevation: --shadow-sm, --shadow-md, --shadow-lg",
+        impact: Math.min(8, (shadows.size - 3) * 2)
+      });
+    }
+    return findings;
+  }
+};
+var customPropertyUsage = {
+  id: "custom-property-usage",
+  name: "CSS Custom Property Usage",
+  category: "consistency",
+  description: "Checks whether the page uses CSS custom properties for design tokens",
+  evaluate: (snapshot) => {
+    const findings = [];
+    if (!snapshot.meta.usesCustomProperties && snapshot.meta.visibleElements > 20) {
+      findings.push({
+        ruleId: "custom-property-usage",
+        severity: "info",
+        category: "consistency",
+        selector: ":root",
+        message: "No CSS custom properties detected \u2014 hardcoded values make consistency harder",
+        measured: "0 custom properties",
+        expected: "Design tokens defined as CSS custom properties",
+        suggestion: "Define colors, spacing, and typography as CSS custom properties (--color-primary, --space-4, etc.)",
+        impact: 8
+      });
+    }
+    return findings;
+  }
+};
+var interactiveStateConsistency = {
+  id: "interactive-state-consistency",
+  name: "Interactive Element Consistency",
+  category: "consistency",
+  description: "Checks that interactive elements (buttons, links) have consistent styling",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const buttons = snapshot.elements.filter(
+      (el) => el.isVisible && el.tagName === "button" && el.textContent.length > 0
+    );
+    if (buttons.length >= 3) {
+      const paddings = buttons.map(
+        (b) => `${Math.round(b.padding.top)},${Math.round(b.padding.left)}`
+      );
+      const uniquePaddings = new Set(paddings);
+      if (uniquePaddings.size > 3) {
+        findings.push({
+          ruleId: "interactive-state-consistency",
+          severity: "warning",
+          category: "consistency",
+          selector: buttons[0].selector,
+          message: `${uniquePaddings.size} distinct button padding patterns \u2014 buttons should share consistent sizing`,
+          measured: `${uniquePaddings.size} padding patterns`,
+          expected: "1\u20133 button size variants (small, medium, large)",
+          suggestion: "Define button size variants with consistent padding values",
+          impact: Math.min(10, (uniquePaddings.size - 2) * 3)
+        });
+      }
+      const radii = new Set(buttons.map((b) => b.computedStyles.borderRadius));
+      if (radii.size > 2) {
+        findings.push({
+          ruleId: "interactive-state-consistency",
+          severity: "info",
+          category: "consistency",
+          selector: buttons[0].selector,
+          message: `Buttons use ${radii.size} different border-radius values`,
+          measured: `${radii.size} radius values`,
+          expected: "1 consistent border-radius for buttons",
+          suggestion: "Use the same border-radius across all button variants",
+          impact: 5
+        });
+      }
+    }
+    return findings;
+  }
+};
+
+// src/rules/layout.ts
+var overflowDetection = {
+  id: "overflow-detection",
+  name: "Content Overflow Detection",
+  category: "spacing",
+  description: "Detects elements wider than viewport that cause horizontal scroll",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const overflowing = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      if (el.box.x + el.box.width > snapshot.viewport.width + 2) {
+        overflowing.push(el.selector);
+      }
+    }
+    if (overflowing.length > 0) {
+      findings.push({
+        ruleId: "overflow-detection",
+        severity: "error",
+        category: "spacing",
+        selector: overflowing[0],
+        message: `${overflowing.length} element(s) overflow viewport width \u2014 causes horizontal scrollbar`,
+        measured: `${overflowing.length} overflowing elements`,
+        expected: "All elements within viewport bounds",
+        suggestion: "Add overflow-x: hidden to container, or constrain element widths with max-width: 100%",
+        impact: Math.min(20, overflowing.length * 5)
+      });
+    }
+    return findings;
+  }
+};
+var zIndexSanity = {
+  id: "z-index-sanity",
+  name: "Z-Index Value Sanity",
+  category: "consistency",
+  description: "Checks that z-index values are reasonable and follow a scale",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const zValues = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible || !el.stackingContext) continue;
+      const z = el.stackingContext.zIndex;
+      if (z !== 0) {
+        zValues.push({ selector: el.selector, z });
+      }
+    }
+    if (zValues.length === 0) return findings;
+    const max = Math.max(...zValues.map((v) => v.z));
+    const distinct = new Set(zValues.map((v) => v.z)).size;
+    const absurd = zValues.filter((v) => v.z > 1e3);
+    if (absurd.length > 0) {
+      findings.push({
+        ruleId: "z-index-sanity",
+        severity: "warning",
+        category: "consistency",
+        selector: absurd[0].selector,
+        message: `${absurd.length} element(s) with z-index > 1000 (max: ${max}). Use a structured scale instead.`,
+        measured: `Max z-index: ${max}`,
+        expected: "Z-index values following a scale (1, 10, 20, 30, 40, 50, 100)",
+        suggestion: "Define z-index tokens: --z-dropdown: 10, --z-sticky: 20, --z-modal: 30, --z-overlay: 40, --z-toast: 50",
+        impact: Math.min(10, absurd.length * 3)
+      });
+    }
+    if (distinct > 8) {
+      findings.push({
+        ruleId: "z-index-sanity",
+        severity: "info",
+        category: "consistency",
+        selector: "body",
+        message: `${distinct} distinct z-index values \u2014 consider a z-index scale`,
+        measured: distinct,
+        expected: "3\u20136 z-index levels",
+        suggestion: "Consolidate z-index values to a defined scale",
+        impact: Math.min(8, (distinct - 6) * 2)
+      });
+    }
+    return findings;
+  }
+};
+var flexAlignmentExplicit = {
+  id: "flex-alignment-explicit",
+  name: "Flex Alignment Explicit",
+  category: "consistency",
+  description: "Checks that flex containers explicitly set alignment rather than relying on defaults",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const implicitAlignment = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const display = el.computedStyles.display;
+      if (!display.includes("flex")) continue;
+      if (el.childCount < 2) continue;
+      const ai = el.computedStyles.alignItems;
+      const jc = el.computedStyles.justifyContent;
+      if (ai === "normal" && jc === "normal") {
+        implicitAlignment.push(el.selector);
+      }
+    }
+    if (implicitAlignment.length > 5) {
+      findings.push({
+        ruleId: "flex-alignment-explicit",
+        severity: "info",
+        category: "consistency",
+        selector: implicitAlignment[0],
+        message: `${implicitAlignment.length} flex containers rely on default alignment \u2014 explicit is more maintainable`,
+        measured: `${implicitAlignment.length} with default alignment`,
+        expected: "Explicit align-items and justify-content on flex containers",
+        suggestion: "Set align-items and justify-content explicitly on flex containers with 2+ children",
+        impact: Math.min(6, implicitAlignment.length)
+      });
+    }
+    return findings;
+  }
+};
+var layoutNestingDepth = {
+  id: "layout-nesting-depth",
+  name: "Layout Nesting Depth",
+  category: "consistency",
+  description: "Checks that flex/grid nesting doesn't exceed reasonable depth",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const deeplyNested = [];
+    const layoutElements = /* @__PURE__ */ new Set();
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      const d = el.computedStyles.display;
+      if (d.includes("flex") || d.includes("grid")) {
+        layoutElements.add(el.selector);
+      }
+    }
+    for (const el of snapshot.elements) {
+      if (!layoutElements.has(el.selector)) continue;
+      let depth = 0;
+      let current = el.parentSelector;
+      while (current) {
+        if (layoutElements.has(current)) depth++;
+        const parent = snapshot.elements.find((e) => e.selector === current);
+        current = parent?.parentSelector ?? null;
+        if (depth > 6) break;
+      }
+      if (depth >= 4) {
+        deeplyNested.push(el.selector);
+      }
+    }
+    if (deeplyNested.length > 0) {
+      findings.push({
+        ruleId: "layout-nesting-depth",
+        severity: "info",
+        category: "consistency",
+        selector: deeplyNested[0],
+        message: `${deeplyNested.length} layout container(s) nested 4+ levels deep \u2014 consider simplifying`,
+        measured: `${deeplyNested.length} deeply nested`,
+        expected: "Max 3 levels of flex/grid nesting",
+        suggestion: "Flatten layout structure where possible. Deep nesting often indicates over-engineering.",
+        impact: Math.min(8, deeplyNested.length * 2)
+      });
+    }
+    return findings;
+  }
+};
+var positioningAudit = {
+  id: "positioning-audit",
+  name: "Positioning Audit",
+  category: "spacing",
+  description: "Audits fixed/absolute positioning for potential layout issues",
+  evaluate: (snapshot) => {
+    const findings = [];
+    const fixed = [];
+    const absolute = [];
+    for (const el of snapshot.elements) {
+      if (!el.isVisible) continue;
+      if (el.computedStyles.position === "fixed") fixed.push(el.selector);
+      if (el.computedStyles.position === "absolute") absolute.push(el.selector);
+    }
+    if (absolute.length > 10) {
+      findings.push({
+        ruleId: "positioning-audit",
+        severity: "info",
+        category: "spacing",
+        selector: absolute[0],
+        message: `${absolute.length} absolutely positioned elements \u2014 heavy use suggests layout could be simplified`,
+        measured: `${absolute.length} absolute elements`,
+        expected: "Minimal use of absolute positioning",
+        suggestion: "Prefer flexbox/grid layout over absolute positioning. Reserve absolute for overlays and decorative elements.",
+        impact: Math.min(8, Math.round(absolute.length / 3))
+      });
+    }
+    if (fixed.length > 2) {
+      findings.push({
+        ruleId: "positioning-audit",
+        severity: "info",
+        category: "spacing",
+        selector: fixed[0],
+        message: `${fixed.length} fixed-position elements \u2014 check for overlap and content obscuring`,
+        measured: `${fixed.length} fixed elements`,
+        expected: "1\u20132 fixed elements (nav, FAB)",
+        suggestion: "Limit fixed elements to essential UI like navigation and floating action buttons",
+        impact: 4
+      });
+    }
+    return findings;
+  }
+};
+
+// src/rules/index.ts
+var BUILT_IN_RULES = [
+  // ── Spacing (9) ───────────────────────────────────────────────────────────
+  spacingScale,
+  spacingConsistency,
+  spacingVariety,
+  containerPadding,
+  overflowDetection,
+  positioningAudit,
+  contentDensity,
+  sectionBreathing,
+  textEdgePadding,
+  // ── Typography (6) ────────────────────────────────────────────────────────
+  typeScale,
+  fontSizeVariety,
+  fontWeightUsage,
+  lineHeightReadability,
+  fontFamilyCount,
+  lineLength,
+  // ── Color (5) ─────────────────────────────────────────────────────────────
+  colorPaletteSize,
+  contrastCompliance,
+  colorConsistency,
+  pureBlackAvoidance,
+  linkDistinguishability,
+  // ── Hierarchy (6) ─────────────────────────────────────────────────────────
+  headingSizeProgression,
+  ctaDominance,
+  visualWeightDistribution,
+  headingLevelStructure,
+  inputAffordance,
+  iconButtonSize,
+  // ── Accessibility (10) ────────────────────────────────────────────────────
+  imageAltText,
+  touchTargetSize,
+  landmarkPresence,
+  documentLanguage,
+  semanticInteractive,
+  semanticLists,
+  semanticTextElements,
+  emptyInteractiveElements,
+  tableStructure,
+  colorOnlyInformation,
+  // ── Consistency (12) ──────────────────────────────────────────────────────
+  borderRadiusConsistency,
+  shadowConsistency,
+  customPropertyUsage,
+  interactiveStateConsistency,
+  zIndexSanity,
+  flexAlignmentExplicit,
+  layoutNestingDepth,
+  cursorAffordance,
+  transitionPresence,
+  transitionTiming,
+  imageDimensions,
+  imageAspectConsistency,
+  imageContainment
+];
+var RULE_COUNT = BUILT_IN_RULES.length;
+function getRulesByCategory(category) {
+  return BUILT_IN_RULES.filter((r) => r.category === category);
+}
+function getRuleById(id) {
+  return BUILT_IN_RULES.find((r) => r.id === id);
+}
+function getAllRuleIds() {
+  return BUILT_IN_RULES.map((r) => r.id);
+}
+function getRuleCounts() {
+  const counts = {};
+  for (const rule of BUILT_IN_RULES) {
+    counts[rule.category] = (counts[rule.category] ?? 0) + 1;
+  }
+  return counts;
+}
+
+// src/core/engine.ts
+function score(snapshot, options = {}) {
+  const {
+    categories = import_protocol4.RULE_CATEGORIES,
+    customRules = [],
+    _threshold = import_protocol4.DEFAULT_THRESHOLD,
+    skipRules = []
+  } = options;
+  const startTime = performance.now();
+  const skipSet = new Set(skipRules);
+  const allRules = [...BUILT_IN_RULES, ...customRules].filter(
+    (rule) => categories.includes(rule.category) && !skipSet.has(rule.id)
+  );
+  const allFindings = [];
+  const ruleCount = allRules.length;
+  for (const rule of allRules) {
+    try {
+      const findings = rule.evaluate(snapshot);
+      allFindings.push(...findings);
+    } catch (error) {
+      allFindings.push({
+        ruleId: rule.id,
+        severity: "info",
+        category: rule.category,
+        selector: "body",
+        message: `Rule ${rule.id} failed to evaluate: ${error instanceof Error ? error.message : "unknown error"}`,
+        measured: "error",
+        expected: "successful evaluation",
+        suggestion: "This rule encountered an error and was skipped",
+        impact: 0
+      });
+    }
+  }
+  const categoryScores = [];
+  for (const category of categories) {
+    const categoryFindings = allFindings.filter((f) => f.category === category);
+    const categoryRules = allRules.filter((r) => r.category === category);
+    const totalImpact = categoryFindings.reduce((sum, f) => sum + f.impact, 0);
+    const maxPossible = 100;
+    const categoryScore = Math.max(0, Math.round(maxPossible - totalImpact));
+    categoryScores.push({
+      category,
+      score: categoryScore,
+      maxScore: maxPossible,
+      findings: categoryFindings,
+      ruleCount: categoryRules.length,
+      passCount: categoryFindings.filter((f) => f.severity === "pass").length,
+      warningCount: categoryFindings.filter((f) => f.severity === "warning").length,
+      errorCount: categoryFindings.filter((f) => f.severity === "error").length
+    });
+  }
+  const totalScore = categoryScores.length > 0 ? Math.round(
+    categoryScores.reduce((sum, c) => sum + c.score, 0) / categoryScores.length
+  ) : 100;
+  const sortedFindings = [...allFindings].filter((f) => f.severity !== "pass").sort((a, b) => b.impact - a.impact);
+  const durationMs = Math.round(performance.now() - startTime);
+  return {
+    totalScore,
+    categories: categoryScores,
+    findings: sortedFindings,
+    elementsAnalyzed: snapshot.elements.length,
+    rulesEvaluated: ruleCount,
+    timestamp: Date.now(),
+    durationMs,
+    source: snapshot.url
+  };
+}
+function suggest(report, maxSuggestions = 10, focus) {
+  let findings = report.findings.filter(
+    (f) => f.severity === "error" || f.severity === "warning"
+  );
+  if (focus) {
+    findings = findings.filter((f) => f.category === focus);
+  }
+  return findings.slice(0, maxSuggestions).map((finding, index) => ({
+    findingId: `${finding.ruleId}-${index}`,
+    selector: finding.selector,
+    changes: parseSuggestionChanges(finding),
+    expectedImprovement: finding.impact,
+    priority: index + 1,
+    rationale: finding.message
+  }));
+}
+function compare(before, after) {
+  const categoryDeltas = before.categories.map((bc) => {
+    const ac = after.categories.find((c) => c.category === bc.category);
+    return {
+      category: bc.category,
+      delta: ac ? ac.score - bc.score : 0
+    };
+  });
+  const beforeRuleIds = new Set(before.findings.map((f) => f.ruleId));
+  const regressions = after.findings.filter(
+    (f) => !beforeRuleIds.has(f.ruleId) && f.severity !== "pass"
+  );
+  const afterRuleIds = new Set(after.findings.map((f) => f.ruleId));
+  const fixes = before.findings.filter(
+    (f) => !afterRuleIds.has(f.ruleId) && f.severity !== "pass"
+  );
+  return {
+    before: {
+      url: before.source,
+      totalScore: before.totalScore,
+      timestamp: before.timestamp
+    },
+    after: {
+      url: after.source,
+      totalScore: after.totalScore,
+      timestamp: after.timestamp
+    },
+    scoreDelta: after.totalScore - before.totalScore,
+    categoryDeltas,
+    structuralChanges: [],
+    // Requires PageSnapshot comparison (done at inspector level)
+    regressions,
+    fixes
+  };
+}
+function audit(snapshot, options = {}) {
+  const scoreReport = score(snapshot, options);
+  const accessibilityViolations = scoreReport.findings.filter((f) => f.category === "accessibility" && f.severity !== "pass").map((f) => ({
+    criterion: mapRuleToWCAG(f.ruleId),
+    level: "AA",
+    description: f.message,
+    selectors: [f.selector],
+    fix: f.suggestion
+  }));
+  const prioritizedFixes = suggest(scoreReport, 20);
+  const summary = {
+    totalScore: scoreReport.totalScore,
+    grade: (0, import_protocol4.scoreToGrade)(scoreReport.totalScore),
+    topIssue: scoreReport.findings.length > 0 ? scoreReport.findings[0].message : "No issues found",
+    quickWins: prioritizedFixes.filter((s) => s.expectedImprovement >= 5).length,
+    criticalIssues: scoreReport.findings.filter((f) => f.severity === "error").length
+  };
+  return {
+    scoreReport,
+    accessibilityViolations,
+    prioritizedFixes,
+    summary
+  };
+}
+function formatReport(report) {
+  const lines = [];
+  const grade = (0, import_protocol4.scoreToGrade)(report.totalScore);
+  lines.push(`# Design Score: ${report.totalScore}/100 (${grade})`);
+  lines.push("");
+  lines.push(`Analyzed ${report.elementsAnalyzed} elements with ${report.rulesEvaluated} rules in ${report.durationMs}ms.`);
+  lines.push("");
+  for (const cat of report.categories) {
+    const bar = scoreBar(cat.score);
+    lines.push(`## ${cat.category.charAt(0).toUpperCase() + cat.category.slice(1)}: ${cat.score}/100 ${bar}`);
+    const issues = cat.findings.filter((f) => f.severity !== "pass");
+    if (issues.length === 0) {
+      lines.push("All checks passed.");
+    } else {
+      for (const f of issues) {
+        const icon = f.severity === "error" ? "\u{1F534}" : f.severity === "warning" ? "\u{1F7E1}" : "\u{1F535}";
+        lines.push(`${icon} **${f.ruleId}**: ${f.message}`);
+        if (f.suggestion) lines.push(`   \u2192 ${f.suggestion}`);
+      }
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function parseSuggestionChanges(_finding) {
+  return [];
+}
+function mapRuleToWCAG(ruleId) {
+  const map = {
+    "contrast-compliance": "1.4.3",
+    "image-alt-text": "1.1.1",
+    "touch-target-size": "2.5.8",
+    "heading-level-structure": "1.3.1",
+    "landmark-presence": "1.3.6",
+    "document-language": "3.1.1"
+  };
+  return map[ruleId] ?? "4.1.2";
+}
+function scoreBar(score2) {
+  const filled = Math.round(score2 / 10);
+  return "\u2588".repeat(filled) + "\u2591".repeat(10 - filled);
+}
+
+// src/core/reporter.ts
+var import_protocol5 = require("@argus-design/protocol");
+function generateHTMLReport(report) {
+  const grade = (0, import_protocol5.scoreToGrade)(report.totalScore);
+  const gradeColor = getGradeColor(report.totalScore);
+  const date = new Date(report.timestamp).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Argus Design Report \u2014 ${report.source}</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,system-ui,sans-serif;background:#0a0a0a;color:#e5e5e5;font-size:14px;line-height:1.6;padding:40px 20px}
+.container{max-width:800px;margin:0 auto}
+.header{text-align:center;margin-bottom:48px}
+.header h1{font-size:14px;color:#737373;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;font-weight:500}
+.header .url{font-size:16px;color:#a3a3a3;margin-bottom:24px}
+.score-ring{width:140px;height:140px;margin:0 auto 16px;position:relative}
+.score-ring svg{transform:rotate(-90deg)}
+.score-ring .score-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:700;letter-spacing:-0.03em}
+.score-ring .grade{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:13px;padding:2px 10px;border-radius:4px;font-weight:600}
+.date{font-size:12px;color:#525252;margin-top:8px}
+.categories{display:grid;gap:16px;margin-bottom:40px}
+.cat-card{background:#111;border:1px solid #262626;border-radius:8px;padding:20px}
+.cat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
+.cat-name{font-size:14px;font-weight:600;text-transform:capitalize}
+.cat-score{font-family:monospace;font-size:20px;font-weight:700}
+.bar-track{height:6px;background:#1a1a1a;border-radius:3px;overflow:hidden;margin-bottom:16px}
+.bar-fill{height:100%;border-radius:3px;transition:width 1s ease}
+.findings{list-style:none}
+.finding{display:flex;gap:10px;padding:6px 0;font-size:13px;color:#a3a3a3;border-bottom:1px solid #1a1a1a}
+.finding:last-child{border-bottom:none}
+.dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex-shrink:0}
+.dot-error{background:#f87171}
+.dot-warning{background:#fbbf24}
+.dot-info{background:#60a5fa}
+.dot-pass{background:#4ade80}
+.finding strong{color:#e5e5e5;font-weight:500}
+.finding .suggestion{color:#525252;font-style:italic}
+.meta{text-align:center;color:#525252;font-size:12px;margin-top:40px;padding-top:20px;border-top:1px solid #1a1a1a}
+.stats{display:flex;justify-content:center;gap:32px;margin-bottom:40px}
+.stat{text-align:center}
+.stat-val{font-size:22px;font-weight:700;font-family:monospace;color:#22d3ee}
+.stat-label{font-size:11px;color:#525252;text-transform:uppercase;letter-spacing:0.05em}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1>argus design report</h1>
+    <div class="url">${escapeHTML(report.source)}</div>
+    <div class="score-ring">
+      <svg width="140" height="140" viewBox="0 0 140 140">
+        <circle cx="70" cy="70" r="60" fill="none" stroke="#1a1a1a" stroke-width="8"/>
+        <circle cx="70" cy="70" r="60" fill="none" stroke="${gradeColor}" stroke-width="8"
+          stroke-dasharray="${report.totalScore / 100 * 377} 377"
+          stroke-linecap="round"/>
+      </svg>
+      <span class="score-text">${report.totalScore}</span>
+      <span class="grade" style="background:${gradeColor}20;color:${gradeColor};border:1px solid ${gradeColor}40">${grade}</span>
+    </div>
+    <div class="date">${date} \xB7 ${report.durationMs}ms \xB7 ${report.elementsAnalyzed} elements \xB7 ${report.rulesEvaluated} rules</div>
+  </div>
+
+  <div class="stats">
+    <div class="stat"><div class="stat-val">${report.findings.filter((f) => f.severity === "error").length}</div><div class="stat-label">errors</div></div>
+    <div class="stat"><div class="stat-val">${report.findings.filter((f) => f.severity === "warning").length}</div><div class="stat-label">warnings</div></div>
+    <div class="stat"><div class="stat-val">${report.findings.filter((f) => f.severity === "info").length}</div><div class="stat-label">info</div></div>
+    <div class="stat"><div class="stat-val">${report.categories.reduce((sum, c) => sum + c.passCount, 0)}</div><div class="stat-label">passed</div></div>
+  </div>
+
+  <div class="categories">
+${report.categories.map((cat) => renderCategory(cat)).join("\n")}
+  </div>
+
+  <div class="meta">
+    Generated by Argus Design Intelligence Runtime \xB7 <a href="https://argus.design" style="color:#22d3ee">argus.design</a>
+  </div>
+</div>
+</body>
+</html>`;
+}
+function generateAuditHTMLReport(audit2) {
+  let html = generateHTMLReport(audit2.scoreReport);
+  if (audit2.accessibilityViolations.length > 0) {
+    const a11ySection = `
+  <div class="cat-card" style="border-color:#f8717140;margin-top:16px">
+    <div class="cat-header">
+      <span class="cat-name">WCAG Violations</span>
+      <span class="cat-score" style="color:#f87171">${audit2.accessibilityViolations.length}</span>
+    </div>
+    <ul class="findings">
+${audit2.accessibilityViolations.map((v) => `
+      <li class="finding">
+        <span class="dot dot-error"></span>
+        <div><strong>[${v.criterion}] ${escapeHTML(v.description)}</strong><br><span class="suggestion">Fix: ${escapeHTML(v.fix)}</span></div>
+      </li>`).join("")}
+    </ul>
+  </div>`;
+    html = html.replace('</div>\n\n  <div class="meta">', `${a11ySection}
+  </div>
+
+  <div class="meta">`);
+  }
+  return html;
+}
+function renderCategory(cat) {
+  const color = getGradeColor(cat.score);
+  const issues = cat.findings.filter((f) => f.severity !== "pass");
+  const passes = cat.findings.filter((f) => f.severity === "pass");
+  return `    <div class="cat-card">
+      <div class="cat-header">
+        <span class="cat-name">${cat.category}</span>
+        <span class="cat-score" style="color:${color}">${cat.score}</span>
+      </div>
+      <div class="bar-track"><div class="bar-fill" style="width:${cat.score}%;background:${color}"></div></div>
+      <ul class="findings">
+${issues.map((f) => renderFinding(f)).join("\n")}
+${passes.length > 0 && issues.length > 0 ? `        <li class="finding"><span class="dot dot-pass"></span><div>${passes.length} check(s) passed</div></li>` : ""}
+${issues.length === 0 ? `        <li class="finding"><span class="dot dot-pass"></span><div>All ${cat.ruleCount} checks passed</div></li>` : ""}
+      </ul>
+    </div>`;
+}
+function renderFinding(f) {
+  const dotClass = f.severity === "error" ? "dot-error" : f.severity === "warning" ? "dot-warning" : "dot-info";
+  return `        <li class="finding">
+          <span class="dot ${dotClass}"></span>
+          <div><strong>${f.ruleId}</strong>: ${escapeHTML(f.message)}${f.suggestion ? `<br><span class="suggestion">\u2192 ${escapeHTML(f.suggestion)}</span>` : ""}</div>
+        </li>`;
+}
+function getGradeColor(score2) {
+  if (score2 >= 90) return "#4ade80";
+  if (score2 >= 75) return "#22d3ee";
+  if (score2 >= 55) return "#fbbf24";
+  return "#f87171";
+}
+function escapeHTML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BUILT_IN_RULES,
+  RULE_COUNT,
+  audit,
+  borderRadiusConsistency,
+  colorConsistency,
+  colorOnlyInformation,
+  colorPaletteSize,
+  compare,
+  containerPadding,
+  contentDensity,
+  contrastCompliance,
+  ctaDominance,
+  cursorAffordance,
+  customPropertyUsage,
+  documentLanguage,
+  emptyInteractiveElements,
+  flexAlignmentExplicit,
+  fontFamilyCount,
+  fontSizeVariety,
+  fontWeightUsage,
+  formatReport,
+  generateAuditHTMLReport,
+  generateHTMLReport,
+  getAllRuleIds,
+  getRuleById,
+  getRuleCounts,
+  getRulesByCategory,
+  headingLevelStructure,
+  headingSizeProgression,
+  iconButtonSize,
+  imageAltText,
+  imageAspectConsistency,
+  imageContainment,
+  imageDimensions,
+  inputAffordance,
+  interactiveStateConsistency,
+  landmarkPresence,
+  layoutNestingDepth,
+  lineHeightReadability,
+  lineLength,
+  linkDistinguishability,
+  overflowDetection,
+  positioningAudit,
+  pureBlackAvoidance,
+  score,
+  sectionBreathing,
+  semanticInteractive,
+  semanticLists,
+  semanticTextElements,
+  shadowConsistency,
+  spacingConsistency,
+  spacingScale,
+  spacingVariety,
+  suggest,
+  tableStructure,
+  textEdgePadding,
+  touchTargetSize,
+  transitionPresence,
+  transitionTiming,
+  typeScale,
+  visualWeightDistribution,
+  zIndexSanity
+});