@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-consistency-comprehensive.js

@@ -0,0 +1,1018 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Comprehensive UI Consistency Preflight
+ *
+ * Additional consistency checks beyond the basic and advanced modules.
+ * These catch subtle patterns that affect visual harmony.
+ *
+ * Checks:
+ * 1. Card Elevation Consistency - Consistent shadow/elevation usage
+ * 2. Input Field Consistency - TextField variants, sizes, label patterns
+ * 3. Animation Duration Consistency - Standardized timing values
+ * 4. Z-Index Layer Consistency - Proper stacking context
+ * 5. Responsive Breakpoint Consistency - Consistent breakpoint usage
+ * 6. Color Token Consistency - Using design system colors
+ * 7. Font Weight Consistency - Consistent typography weights
+ * 8. Border Style Consistency - Consistent border patterns
+ *
+ * Usage:
+ *   pnpm preflight:ui-consistency-comprehensive
+ *   pnpm preflight:ui-consistency-comprehensive elevation
+ *   pnpm preflight:ui-consistency-comprehensive inputs
+ *   pnpm preflight:ui-consistency-comprehensive animations
+ *   pnpm preflight:ui-consistency-comprehensive zindex
+ *   pnpm preflight:ui-consistency-comprehensive breakpoints
+ *   pnpm preflight:ui-consistency-comprehensive colors
+ *   pnpm preflight:ui-consistency-comprehensive fonts
+ *   pnpm preflight:ui-consistency-comprehensive borders
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+const file_cache_1 = require("../../shared/file-cache");
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const EXCLUDED_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.stories.tsx",
+    "**/*.examples.tsx",
+    "tests/**",
+];
+async function getAllTsxFiles() {
+    return await file_cache_1.fileCache.getAllTsxJsx();
+}
+/**
+ * Check 1: Card Elevation Consistency
+ * Cards should use consistent elevation/shadow levels
+ */
+async function checkCardElevationConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const elevationUsage = new Map();
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Track Card elevation usage
+            if (/<Card\b/.test(line)) {
+                const cardBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                // Check for elevation prop
+                const elevationMatch = cardBlock.match(/elevation=\{?(\d+)\}?/);
+                if (elevationMatch) {
+                    const elevation = elevationMatch[1];
+                    if (!elevationUsage.has(elevation)) {
+                        elevationUsage.set(elevation, []);
+                    }
+                    elevationUsage.get(elevation).push({ file, line: index + 1 });
+                }
+                // Check for shadow classes
+                const shadowMatch = cardBlock.match(/shadow-(\w+)/);
+                if (shadowMatch) {
+                    const shadow = `shadow-${shadowMatch[1]}`;
+                    if (!elevationUsage.has(shadow)) {
+                        elevationUsage.set(shadow, []);
+                    }
+                    elevationUsage.get(shadow).push({ file, line: index + 1 });
+                }
+                // Check for hardcoded boxShadow
+                if (/boxShadow:\s*["'][^"']+["']/.test(cardBlock) && !cardBlock.includes("var(--shadow")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "card-hardcoded-shadow",
+                        message: "Card with hardcoded boxShadow instead of design token",
+                        suggestion: "Use shadow-sm, shadow-md, shadow-lg or var(--shadow-*) tokens",
+                    });
+                }
+            }
+        });
+    }
+    // Report if too many different elevation levels
+    if (elevationUsage.size > 4) {
+        const sortedUsage = [...elevationUsage.entries()].sort((a, b) => b[1].length - a[1].length);
+        issues.push({
+            file: "codebase-wide",
+            line: 0,
+            severity: "info",
+            rule: "card-elevation-inconsistency",
+            message: `Cards use ${elevationUsage.size} different elevation levels: ${sortedUsage.map(([e, u]) => `${e}(${u.length})`).join(", ")}`,
+            suggestion: "Standardize on 2-3 elevation levels (e.g., 0, 1, 3)",
+        });
+    }
+    return issues;
+}
+/**
+ * Check 2: Input Field Consistency
+ * TextFields should use consistent variants and sizes
+ */
+async function checkInputFieldConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const variantUsage = new Map();
+    const sizeUsage = new Map();
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            if (/<TextField\b/.test(line)) {
+                const fieldBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                // Track variant usage
+                const variantMatch = fieldBlock.match(/variant=["'](\w+)["']/);
+                if (variantMatch) {
+                    variantUsage.set(variantMatch[1], (variantUsage.get(variantMatch[1]) || 0) + 1);
+                }
+                else {
+                    variantUsage.set("default", (variantUsage.get("default") || 0) + 1);
+                }
+                // Track size usage
+                const sizeMatch = fieldBlock.match(/size=["'](\w+)["']/);
+                if (sizeMatch) {
+                    sizeUsage.set(sizeMatch[1], (sizeUsage.get(sizeMatch[1]) || 0) + 1);
+                }
+                // Check for inconsistent label patterns in same file
+                const hasLabel = /\blabel=/.test(fieldBlock);
+                const hasPlaceholder = /placeholder=/.test(fieldBlock);
+                const hasInputLabel = /<InputLabel/.test(content);
+                if (hasLabel && hasInputLabel) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "mixed-label-patterns",
+                        message: "File mixes TextField label prop with InputLabel component",
+                        suggestion: "Use consistent label pattern (prefer TextField label prop)",
+                    });
+                }
+            }
+        });
+    }
+    // Report variant inconsistency
+    if (variantUsage.size > 2) {
+        const sorted = [...variantUsage.entries()].sort((a, b) => b[1] - a[1]);
+        issues.push({
+            file: "codebase-wide",
+            line: 0,
+            severity: "info",
+            rule: "textfield-variant-inconsistency",
+            message: `TextFields use ${variantUsage.size} variants: ${sorted.map(([v, c]) => `${v}(${c})`).join(", ")}`,
+            suggestion: "Standardize on outlined variant for most forms",
+        });
+    }
+    return issues;
+}
+/**
+ * Check 3: Animation Duration Consistency
+ * Animations should use consistent timing values
+ */
+async function checkAnimationDurationConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const durations = new Map();
+    // Standard durations (in ms)
+    const STANDARD_DURATIONS = new Set(["100", "150", "200", "300", "500", "700", "1000"]);
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Check for duration in Tailwind classes
+            const tailwindDuration = line.match(/duration-(\d+)/g);
+            if (tailwindDuration) {
+                tailwindDuration.forEach((d) => {
+                    const ms = d.replace("duration-", "");
+                    if (!durations.has(ms))
+                        durations.set(ms, []);
+                    durations.get(ms).push({ file, line: index + 1 });
+                });
+            }
+            // Check for hardcoded transition durations
+            const hardcodedMatch = line.match(/transition[^:]*:\s*[^;]*(\d+(?:\.\d+)?)(ms|s)/g);
+            if (hardcodedMatch) {
+                hardcodedMatch.forEach((match) => {
+                    const durationMatch = match.match(/(\d+(?:\.\d+)?)(ms|s)/);
+                    if (durationMatch) {
+                        let ms = durationMatch[2] === "s"
+                            ? String(parseFloat(durationMatch[1]) * 1000)
+                            : durationMatch[1];
+                        // Skip if using design token
+                        if (!line.includes("var(--transition")) {
+                            if (!STANDARD_DURATIONS.has(ms)) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    severity: "info",
+                                    rule: "non-standard-duration",
+                                    message: `Non-standard animation duration: ${ms}ms`,
+                                    suggestion: "Use standard durations: 150ms (fast), 200ms (normal), 300ms (slow)",
+                                });
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+    return issues;
+}
+/**
+ * Check 4: Z-Index Layer Consistency
+ * Z-index values should follow a consistent scale
+ */
+async function checkZIndexConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const zIndexValues = new Map();
+    // Standard z-index scale
+    const STANDARD_ZINDEX = new Set([
+        "0",
+        "10",
+        "20",
+        "30",
+        "40",
+        "50",
+        "100",
+        "999",
+        "1000",
+        "9999",
+    ]);
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Check for z-index in Tailwind
+            const tailwindZ = line.match(/\bz-(\d+)/g);
+            if (tailwindZ) {
+                tailwindZ.forEach((z) => {
+                    const value = z.replace("z-", "");
+                    if (!zIndexValues.has(value))
+                        zIndexValues.set(value, []);
+                    zIndexValues.get(value).push({ file, line: index + 1 });
+                });
+            }
+            // Check for hardcoded zIndex in style
+            const styleZ = line.match(/zIndex:\s*(\d+)/);
+            if (styleZ && !line.includes("var(--z-")) {
+                const value = styleZ[1];
+                if (!STANDARD_ZINDEX.has(value) && parseInt(value) > 10) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "non-standard-zindex",
+                        message: `Non-standard z-index value: ${value}`,
+                        suggestion: "Use z-index tokens: 10 (dropdown), 20 (sticky), 30 (fixed), 40 (modal), 50 (tooltip)",
+                    });
+                }
+            }
+        });
+    }
+    // Report if too many different z-index values
+    if (zIndexValues.size > 8) {
+        const sorted = [...zIndexValues.entries()].sort((a, b) => parseInt(a[0]) - parseInt(b[0]));
+        issues.push({
+            file: "codebase-wide",
+            line: 0,
+            severity: "info",
+            rule: "zindex-proliferation",
+            message: `${zIndexValues.size} different z-index values used: ${sorted.map(([z]) => z).join(", ")}`,
+            suggestion: "Consolidate to standard scale: 10, 20, 30, 40, 50",
+        });
+    }
+    return issues;
+}
+/**
+ * Check 5: Responsive Breakpoint Consistency
+ * Breakpoints should be used consistently
+ */
+async function checkBreakpointConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const breakpointUsage = new Map();
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Track Tailwind breakpoint usage
+            const breakpoints = line.match(/\b(sm|md|lg|xl|2xl):/g);
+            if (breakpoints) {
+                breakpoints.forEach((bp) => {
+                    const clean = bp.replace(":", "");
+                    breakpointUsage.set(clean, (breakpointUsage.get(clean) || 0) + 1);
+                });
+            }
+            // Check for hardcoded media queries
+            if (/@media\s*\([^)]*\d+px/.test(line)) {
+                const pxMatch = line.match(/@media\s*\([^)]*(\d+)px/);
+                if (pxMatch) {
+                    const px = parseInt(pxMatch[1]);
+                    // Check if it matches Tailwind breakpoints
+                    const tailwindBreakpoints = { 640: "sm", 768: "md", 1024: "lg", 1280: "xl", 1536: "2xl" };
+                    if (!Object.keys(tailwindBreakpoints).includes(String(px))) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "non-standard-breakpoint",
+                            message: `Non-standard breakpoint: ${px}px`,
+                            suggestion: "Use Tailwind breakpoints: sm(640), md(768), lg(1024), xl(1280), 2xl(1536)",
+                        });
+                    }
+                }
+            }
+            // Check for skipped breakpoints (e.g., sm: then xl: without md: or lg:)
+            if (/\bsm:/.test(line) && /\bxl:/.test(line) && !/\b(md|lg):/.test(line)) {
+                issues.push({
+                    file,
+                    line: index + 1,
+                    severity: "info",
+                    rule: "skipped-breakpoints",
+                    message: "Responsive classes skip intermediate breakpoints (sm ${chars.arrow} xl)",
+                    suggestion: "Consider adding md: or lg: for smoother responsive behavior",
+                });
+            }
+        });
+    }
+    return issues;
+}
+async function checkColorTokenConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const HARDCODED_PATTERNS = [
+        { pattern: /#[0-9a-fA-F]{3,6}/, name: "Hex Color" },
+        { pattern: /rgb\([\d\s,]+\)/, name: "RGB Color" },
+        { pattern: /rgba\([\d\s,.]+\)/, name: "RGBA Color" },
+        { pattern: /hsl\([\d\s,]+\)/, name: "HSL Color" },
+    ];
+    // Colors that are "impure" because they aren't semantic
+    // e.g. bg-gray-100 is "impure", bg-background or bg-card is "pure"
+    // We want to verify usage of semantic tokens: primary, secondary, accent, success, warning, error, info, background, surface, etc.
+    // AND neutral grays (gray-50 etc) should often be replaced by 'muted', 'card', 'popover' etc if possible, but might be acceptable relative to "pure" requests.
+    // HOWEVER, the user asked for purity. Usually this means Semantic Tokens.
+    const GENERIC_TW_COLORS = [
+        "slate",
+        "gray",
+        "zinc",
+        "neutral",
+        "stone",
+        "red",
+        "orange",
+        "amber",
+        "yellow",
+        "lime",
+        "green",
+        "emerald",
+        "teal",
+        "cyan",
+        "sky",
+        "blue",
+        "indigo",
+        "violet",
+        "purple",
+        "fuchsia",
+        "pink",
+        "rose",
+    ];
+    const EXCEPTIONS = ["transparent", "current", "inherit", "black", "white", "currentColor"];
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Skip comments
+            if (line.trim().startsWith("//") ||
+                line.trim().startsWith("*") ||
+                line.trim().startsWith("/*"))
+                return;
+            // 1. Check for Hardcoded Values (Hex, RGB)
+            for (const { pattern, name } of HARDCODED_PATTERNS) {
+                if (pattern.test(line)) {
+                    // Check if it's inside a var(...) or part of a defined token
+                    if (line.includes("var(--"))
+                        return;
+                    // Loose check to avoid flagging things inside strings/content (approximate)
+                    // We mainly care about className="..." or style={{...}}
+                    if (!/className=|style=/.test(line))
+                        return;
+                    const match = line.match(pattern);
+                    if (match) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "warning", // Warning for now, stricter later?
+                            rule: "no-hardcoded-colors",
+                            message: `Hardcoded ${name}: ${match[0]}`,
+                            suggestion: "Use semantic design tokens (bg-primary, text-muted) instead.",
+                        });
+                    }
+                }
+            }
+            // 2. Check for Non-Semantic Tailwind Colors
+            // Regex looks for words like bg-blue-500, text-gray-900, border-red-200
+            // format: (bg|text|border|ring|fill|stroke|decoration|shadow)-[color]-[number]
+            const genericRegex = new RegExp(`\\b(bg|text|border|ring|fill|stroke|decoration|shadow)-(${GENERIC_TW_COLORS.join("|")})-(\\d+|50)\\b`, "g");
+            let match;
+            while ((match = genericRegex.exec(line)) !== null) {
+                // Exclude if it's mapped to a variable/token? No, this is checking the class usage itself.
+                issues.push({
+                    file,
+                    line: index + 1,
+                    severity: "warning", // Promoted to warning per user request
+                    rule: "use-semantic-colors",
+                    message: `Generic Tailwind color used: ${match[0]}`,
+                    suggestion: "Prefer semantic tokens (e.g., bg-surface-100, text-primary, border-divider) over generic palette colors.",
+                });
+            }
+        });
+    }
+    return issues;
+}
+/**
+ * Check 7: Font Weight Consistency
+ * Font weights should use consistent values
+ */
+async function checkFontWeightConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const weightUsage = new Map();
+    // Standard font weights
+    const STANDARD_WEIGHTS = new Set([
+        "normal",
+        "medium",
+        "semibold",
+        "bold",
+        "400",
+        "500",
+        "600",
+        "700",
+    ]);
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Track Tailwind font weight usage
+            const tailwindWeight = line.match(/\bfont-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)/g);
+            if (tailwindWeight) {
+                tailwindWeight.forEach((w) => {
+                    const weight = w.replace("font-", "");
+                    weightUsage.set(weight, (weightUsage.get(weight) || 0) + 1);
+                });
+            }
+            // Check for numeric font weights
+            const numericWeight = line.match(/fontWeight:\s*(\d+)/);
+            if (numericWeight) {
+                const weight = numericWeight[1];
+                if (!["400", "500", "600", "700"].includes(weight)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "non-standard-font-weight",
+                        message: `Non-standard font weight: ${weight}`,
+                        suggestion: "Use standard weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)",
+                    });
+                }
+            }
+        });
+    }
+    // Report if using too many different weights
+    if (weightUsage.size > 4) {
+        const sorted = [...weightUsage.entries()].sort((a, b) => b[1] - a[1]);
+        issues.push({
+            file: "codebase-wide",
+            line: 0,
+            severity: "info",
+            rule: "font-weight-proliferation",
+            message: `${weightUsage.size} different font weights used: ${sorted.map(([w, c]) => `${w}(${c})`).join(", ")}`,
+            suggestion: "Limit to 3-4 weights: normal, medium, semibold, bold",
+        });
+    }
+    return issues;
+}
+/**
+ * Check 8: Border Style Consistency
+ * Borders should use consistent patterns
+ */
+async function checkBorderStyleConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    const borderWidths = new Map();
+    const borderStyles = new Map();
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Track border width usage
+            const borderWidth = line.match(/\bborder(?:-[trbl])?-(\d+)/g);
+            if (borderWidth) {
+                borderWidth.forEach((b) => {
+                    const width = b.match(/\d+/)?.[0] || "1";
+                    borderWidths.set(width, (borderWidths.get(width) || 0) + 1);
+                });
+            }
+            // Check for hardcoded border in style
+            const styleBorder = line.match(/border(?:Width)?:\s*["']?(\d+)px/);
+            if (styleBorder) {
+                const width = styleBorder[1];
+                if (!["1", "2", "4"].includes(width)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "non-standard-border-width",
+                        message: `Non-standard border width: ${width}px`,
+                        suggestion: "Use standard widths: 1px (default), 2px (emphasis), 4px (heavy)",
+                    });
+                }
+            }
+            // Check for border-radius consistency
+            const borderRadius = line.match(/rounded-(\w+)/g);
+            if (borderRadius) {
+                borderRadius.forEach((r) => {
+                    const radius = r.replace("rounded-", "");
+                    borderStyles.set(radius, (borderStyles.get(radius) || 0) + 1);
+                });
+            }
+        });
+    }
+    // Report if too many different border radii
+    if (borderStyles.size > 6) {
+        const sorted = [...borderStyles.entries()].sort((a, b) => b[1] - a[1]);
+        issues.push({
+            file: "codebase-wide",
+            line: 0,
+            severity: "info",
+            rule: "border-radius-proliferation",
+            message: `${borderStyles.size} different border radii used: ${sorted
+                .slice(0, 8)
+                .map(([r, c]) => `${r}(${c})`)
+                .join(", ")}`,
+            suggestion: "Standardize on: none, sm, md, lg, full",
+        });
+    }
+    return issues;
+}
+/**
+ * Check 9: Spacing Token Consistency
+ * Spacing and positioning should use consistent tokens
+ */
+async function checkSpacingTokenConsistency() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    // Regex for hardcoded numeric values in styles
+    const HARDCODED_SPACING_REGEX = /((?:margin|padding)(?:Top|Right|Bottom|Left|X|Y)?|top|right|bottom|left):\s*["'](?!(?:0|auto|inherit|initial|unset))(-?\d+(\.\d+)?(px|rem|em))["']/;
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Skip comments and imports
+            if (line.trim().startsWith("//") ||
+                line.trim().startsWith("*") ||
+                /^import/.test(line.trim())) {
+                return;
+            }
+            // Check for hardcoded spacing/positioning in style objects
+            const match = line.match(HARDCODED_SPACING_REGEX);
+            if (match) {
+                // Skip if line uses CSS variables
+                if (line.includes("var(--"))
+                    return;
+                // Skip if line involves calculations that might be dynamic
+                if (line.includes("calc("))
+                    return;
+                issues.push({
+                    file,
+                    line: index + 1,
+                    severity: "info",
+                    rule: "hardcoded-spacing",
+                    message: `Hardcoded spacing/positioning: ${match[0]}`,
+                    suggestion: "Use Tailwind classes (p-4, m-2) or var(--spacing-*) tokens",
+                });
+            }
+        });
+    }
+    return issues;
+}
+/**
+ * Check 10: Button/Element Symmetry
+ * Buttons and interactive elements should have symmetrical padding
+ */
+async function checkElementSymmetry() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Check any line with a className with padding
+            if (/className=["'][^"']*\bp[lrtbxy]-/.test(line)) {
+                // Skip lists - they often use pl- for indentation logic which is validly asymmetric
+                if (/<[uo]l/.test(line) ||
+                    /component=["']ul["']/.test(line) ||
+                    /component=["']ol["']/.test(line)) {
+                    return;
+                }
+                // Horizontal Symmetry (pl vs pr)
+                const plMatch = line.match(/\bpl-(\d+|\[[^\]]+\])\b/);
+                const prMatch = line.match(/\bpr-(\d+|\[[^\]]+\])\b/);
+                // Case 1: Has both but different values
+                if (plMatch && prMatch && plMatch[1] !== prMatch[1]) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "asymmetric-padding-x",
+                        message: `Element has asymmetric horizontal padding: pl-${plMatch[1]} vs pr-${prMatch[1]}`,
+                        suggestion: "Use px-* for symmetrical horizontal padding, or match pl/pr values",
+                    });
+                }
+                // Case 2: Has pl but missing pr (and not part of px)
+                if (plMatch && !prMatch && !/\bpx-/.test(line)) {
+                    // Skip if it looks like an icon container or input with icon
+                    if (!/icon|input|search/i.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "missing-padding-right",
+                            message: `Element has left padding (pl-${plMatch[1]}) but no right padding`,
+                            suggestion: "Ensure symmetry with pr-* or use px-*",
+                        });
+                    }
+                }
+                // Case 3: Has pr but missing pl (and not part of px)
+                if (prMatch && !plMatch && !/\bpx-/.test(line)) {
+                    if (!/icon|input|search/i.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "missing-padding-left",
+                            message: `Element has right padding (pr-${prMatch[1]}) but no left padding`,
+                            suggestion: "Ensure symmetry with pl-* or use px-*",
+                        });
+                    }
+                }
+                // Vertical Symmetry (pt vs pb)
+                const ptMatch = line.match(/\bpt-(\d+|\[[^\]]+\])\b/);
+                const pbMatch = line.match(/\bpb-(\d+|\[[^\]]+\])\b/);
+                if (ptMatch && pbMatch && ptMatch[1] !== pbMatch[1]) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        severity: "info",
+                        rule: "asymmetric-padding-y",
+                        message: `Element has asymmetric vertical padding: pt-${ptMatch[1]} vs pb-${pbMatch[1]}`,
+                        suggestion: "Use py-* for symmetrical vertical padding, or match pt/pb values",
+                    });
+                }
+                // Case 4: Has pt but missing pb (and not part of py)
+                if (ptMatch && !pbMatch && !/\bpy-/.test(line)) {
+                    // Top padding often valid for headers/sections, so we use lower severity or skip mostly
+                    // Only flag if it looks like a button or card
+                    if (/<Button|<Card|<Badge/.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "missing-padding-bottom",
+                            message: `Component has top padding (pt-${ptMatch[1]}) but no bottom padding`,
+                            suggestion: "Ensure symmetry with pb-* or use py-*",
+                        });
+                    }
+                }
+            }
+            // Check border symmetry
+            if (/className=["'][^"']*\bborder-[lrtb]-/.test(line)) {
+                // Horizontal Border Symmetry
+                const borderL = line.match(/\bborder-l(?:-(\d+|\[[^\]]+\]))?\b/);
+                const borderR = line.match(/\bborder-r(?:-(\d+|\[[^\]]+\]))?\b/);
+                // Case 1: Mismatched values
+                if (borderL && borderR) {
+                    const lVal = borderL[1] || "default";
+                    const rVal = borderR[1] || "default";
+                    if (lVal !== rVal) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "asymmetric-border-x",
+                            message: `Element has asymmetric horizontal borders: Left(${lVal}) vs Right(${rVal})`,
+                            suggestion: "Ensure symmetry or use border-x-*",
+                        });
+                    }
+                }
+                // Case 2: Left but no Right
+                if (borderL && !borderR && !/\bborder-x-/.test(line)) {
+                    // Skip tables or divided lists where single borders are common
+                    if (!/table|divide|separator|border-r-0/i.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "missing-border-right",
+                            message: `Element has left border but no right border`,
+                            suggestion: "Ensure symmetry with border-r-* or use border-x-* (unless intentional divider)",
+                        });
+                    }
+                }
+                // Case 3: Right but no Left
+                if (borderR && !borderL && !/\bborder-x-/.test(line)) {
+                    if (!/table|divide|separator|border-l-0/i.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "missing-border-left",
+                            message: `Element has right border but no left border`,
+                            suggestion: "Ensure symmetry with border-l-* or use border-x-* (unless intentional divider)",
+                        });
+                    }
+                }
+            }
+            // Check border radius symmetry (rounded corners)
+            if (/className=["'][^"']*\brounded-/.test(line)) {
+                // Top corners
+                const roundedTL = line.match(/\brounded-tl(?:-([a-z0-9]+))?\b/);
+                const roundedTR = line.match(/\brounded-tr(?:-([a-z0-9]+))?\b/);
+                if (roundedTL && roundedTR) {
+                    const lVal = roundedTL[1] || "default";
+                    const rVal = roundedTR[1] || "default";
+                    if (lVal !== rVal) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "asymmetric-radius-top",
+                            message: `Element has asymmetric top rounding: TL(${lVal}) vs TR(${rVal})`,
+                            suggestion: "Ensure symmetry with matching values or use rounded-t-*",
+                        });
+                    }
+                }
+                // Bottom corners
+                const roundedBL = line.match(/\brounded-bl(?:-([a-z0-9]+))?\b/);
+                const roundedBR = line.match(/\brounded-br(?:-([a-z0-9]+))?\b/);
+                if (roundedBL && roundedBR) {
+                    const lVal = roundedBL[1] || "default";
+                    const rVal = roundedBR[1] || "default";
+                    if (lVal !== rVal) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "asymmetric-radius-bottom",
+                            message: `Element has asymmetric bottom rounding: BL(${lVal}) vs BR(${rVal})`,
+                            suggestion: "Ensure symmetry with matching values or use rounded-b-*",
+                        });
+                    }
+                }
+                // Left corners (TL vs BL)
+                if (roundedTL && roundedBL) {
+                    const tVal = roundedTL[1] || "default";
+                    const bVal = roundedBL[1] || "default";
+                    if (tVal !== bVal) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "asymmetric-radius-left",
+                            message: `Element has asymmetric left rounding: TL(${tVal}) vs BL(${bVal})`,
+                            suggestion: "Ensure symmetry with matching values or use rounded-l-*",
+                        });
+                    }
+                }
+                // Right corners (TR vs BR)
+                if (roundedTR && roundedBR) {
+                    const tVal = roundedTR[1] || "default";
+                    const bVal = roundedBR[1] || "default";
+                    if (tVal !== bVal) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            severity: "info",
+                            rule: "asymmetric-radius-right",
+                            message: `Element has asymmetric right rounding: TR(${tVal}) vs BR(${bVal})`,
+                            suggestion: "Ensure symmetry with matching values or use rounded-r-*",
+                        });
+                    }
+                }
+                // Check for isolated corners on Buttons (usually wrong unless grouped)
+                if (/<Button/.test(line) && !/group|joined/.test(line)) {
+                    if ((roundedTL || roundedTR || roundedBL || roundedBR) &&
+                        !/\brounded-(md|lg|full|nm|sm|xl|2xl|3xl)\b/.test(line) &&
+                        !/\brounded\b/.test(line)) {
+                        // If it has a specific corner but not a global one, check if it forms a complete side
+                        const hasTop = roundedTL && roundedTR;
+                        const hasBottom = roundedBL && roundedBR;
+                        const hasLeft = roundedTL && roundedBL;
+                        const hasRight = roundedTR && roundedBR;
+                        if (!hasTop && !hasBottom && !hasLeft && !hasRight) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                severity: "warning",
+                                rule: "isolated-radius-button",
+                                message: `Button has isolated rounded corners. Buttons should usually be fully rounded or constitute a group.`,
+                                suggestion: "Use rounded-md/lg/full or ensure it is part of a button group",
+                            });
+                        }
+                    }
+                }
+            }
+        });
+    }
+    return issues;
+}
+/**
+ * Check 11: Responsive Purity
+ * Ensure no hardcoded JIT pixel values are used in utility classes
+ */
+async function checkResponsivePurity() {
+    const issues = [];
+    const files = await getAllTsxFiles();
+    // Allowed JIT pixel patterns (accessibility/UX standards)
+    const allowedPatterns = [
+        /min-h-\[44px\]/, // Touch target minimum (WCAG)
+        /min-h-\[48px\]/, // Material Design touch target
+        /min-w-\[44px\]/, // Touch target minimum
+        /min-w-\[48px\]/, // Material Design touch target
+        /text-\[\d+px\]/, // Font sizes (often intentional)
+        /max-h-\[200px\]/, // Common modal/dropdown max height
+        /max-w-\[200px\]/, // Common card/column width
+        /min-h-\[108px\]/, // Header height
+        /min-h-\[400px\]/, // Content area minimum
+    ];
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        lines.forEach((line, index) => {
+            // Find classes like w-[500px], p-[20px], top-[15px]
+            const jitMatch = line.match(/\b[a-z0-9]+-\[[^\]]*px\]/);
+            if (jitMatch) {
+                // Skip if it looks like a specifically calculated calc() inside (rare but valid)
+                if (jitMatch[0].includes("calc"))
+                    return;
+                // Skip allowed patterns
+                if (allowedPatterns.some((pattern) => pattern.test(jitMatch[0])))
+                    return;
+                // Skip preflight-ignore comments
+                if (line.includes("preflight-ignore"))
+                    return;
+                issues.push({
+                    file,
+                    line: index + 1,
+                    severity: "warning", // Changed from 'error' to 'warning'
+                    rule: "no-hardcoded-jit-pixels",
+                    message: `Hardcoded pixel value in JIT class: ${jitMatch[0]}`,
+                    suggestion: "Use responsive design tokens or standard Tailwind utilities (e.g., w-64, p-4) instead of arbitrary pixels.",
+                });
+            }
+        });
+    }
+    return issues;
+}
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const checkType = args.find((a) => !a.startsWith("--"));
+    const verbose = args.includes("--verbose");
+    console.log(`\n${console_chars_1.emoji.palette} COMPREHENSIVE UI CONSISTENCY PREFLIGHT\n`);
+    console.log("Checking for UI consistency patterns...\n");
+    console.log("=".repeat(60));
+    const allIssues = [];
+    const checks = [];
+    const runCheck = async (name, fn) => {
+        const start = Date.now();
+        const issues = await fn();
+        const duration = Date.now() - start;
+        checks.push({ name, issues, duration });
+        allIssues.push(...issues);
+        return issues;
+    };
+    // Run checks based on argument or all
+    if (!checkType || checkType === "elevation") {
+        await runCheck("Card Elevation", checkCardElevationConsistency);
+    }
+    if (!checkType || checkType === "inputs") {
+        await runCheck("Input Fields", checkInputFieldConsistency);
+    }
+    if (!checkType || checkType === "animations") {
+        await runCheck("Animation Duration", checkAnimationDurationConsistency);
+    }
+    if (!checkType || checkType === "zindex") {
+        await runCheck("Z-Index Layers", checkZIndexConsistency);
+    }
+    if (!checkType || checkType === "breakpoints") {
+        await runCheck("Breakpoints", checkBreakpointConsistency);
+    }
+    if (!checkType || checkType === "colors") {
+        await runCheck("Color Tokens", checkColorTokenConsistency);
+    }
+    if (!checkType || checkType === "fonts") {
+        await runCheck("Font Weights", checkFontWeightConsistency);
+    }
+    if (!checkType || checkType === "borders") {
+        await runCheck("Border Styles", checkBorderStyleConsistency);
+    }
+    if (!checkType || checkType === "spacing") {
+        await runCheck("Spacing Tokens", checkSpacingTokenConsistency);
+    }
+    if (!checkType || checkType === "symmetry") {
+        await runCheck("Element Symmetry", checkElementSymmetry);
+    }
+    if (!checkType || checkType === "responsive") {
+        await runCheck("Responsive Purity", checkResponsivePurity);
+    }
+    // Report results
+    const errors = allIssues.filter((i) => i.severity === "error");
+    const warnings = allIssues.filter((i) => i.severity === "warning");
+    const infos = allIssues.filter((i) => i.severity === "info");
+    // Print check results
+    for (const check of checks) {
+        const icon = check.issues.filter((i) => i.severity === "error").length > 0
+            ? `${console_chars_1.emoji.error}`
+            : `${console_chars_1.emoji.success}`;
+        console.log(`${icon} ${check.name} (${check.issues.length} issues, ${(check.duration / 1000).toFixed(1)}s)`);
+    }
+    if (verbose && allIssues.length > 0) {
+        console.log("\n" + (0, console_chars_1.createDivider)(60, "light"));
+        console.log("\nIssues found:\n");
+        // Sort issues by severity: Error > Warning > Info
+        allIssues.sort((a, b) => {
+            const severityScore = { error: 0, warning: 1, info: 2 };
+            return severityScore[a.severity] - severityScore[b.severity];
+        });
+        for (const issue of allIssues.slice(0, 50)) {
+            const color = issue.severity === "error"
+                ? `${console_chars_1.emoji.error}`
+                : issue.severity === "warning"
+                    ? `${console_chars_1.emoji.warning}`
+                    : `${console_chars_1.emoji.info}`;
+            console.log(`${color} ${issue.file}:${issue.line}`);
+            console.log(`   ${issue.message}`);
+            if (issue.suggestion)
+                console.log(`   ${console_chars_1.chars.arrow} ${issue.suggestion}`);
+        }
+        if (allIssues.length > 50) {
+            console.log(`\n... and ${allIssues.length - 50} more issues`);
+        }
+    }
+    console.log("\n" + "=".repeat(60));
+    console.log(`\n${console_chars_1.emoji.chart} Results: ${errors.length} errors, ${warnings.length} warnings, ${infos.length} info`);
+    console.log(`   Checks run: ${checks.length}`);
+    console.log(`   Total time: ${(checks.reduce((a, c) => a + c.duration, 0) / 1000).toFixed(1)}s`);
+    if (checkType) {
+        console.log(`   Check type: ${checkType}`);
+    }
+    // This is non-blocking - consistency issues are suggestions
+    if (errors.length > 0) {
+        console.log(`\n${console_chars_1.emoji.error} UI Consistency check FAILED\n`);
+        process.exit(1);
+    }
+    else if (warnings.length > 0) {
+        console.log(`\n${console_chars_1.emoji.warning} UI Consistency check completed with warnings\n`);
+    }
+    else {
+        console.log(`\n${console_chars_1.emoji.success} UI Consistency Comprehensive PASSED\n`);
+    }
+    process.exit(0);
+}
+main().catch(console.error);
+//# sourceMappingURL=ui-consistency-comprehensive.js.map