@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/core/ui-quality.js

@@ -0,0 +1,1736 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * UI Quality Preflight Checks
+ * Comprehensive UI consistency, design tokens, and accessibility validation
+ */
+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 });
+// import { validateHeaderSpacing } from '../specialized/header-spacing-validation'; // Module not yet implemented
+const console_chars_1 = require("../../utils/console-chars");
+const unified_badge_consistency_1 = require("../specialized/unified-badge-consistency");
+const file_scanner_1 = require("../../utils/file-scanner");
+const preflight_runner_1 = require("../../utils/preflight-runner");
+const validation_helpers_1 = require("../../utils/validation-helpers");
+async function runUIQualityPreflights() {
+    const runner = new preflight_runner_1.PreflightRunner(true);
+    const scanner = new file_scanner_1.FileScanner();
+    // File Naming Conventions
+    runner.addCheck((0, preflight_runner_1.createCheck)("File Naming Conventions", "Validate kebab-case and PascalCase naming patterns", async () => {
+        return await (0, validation_helpers_1.validateFileNaming)();
+    }));
+    // Design Tokens Usage
+    runner.addCheck((0, preflight_runner_1.createCheck)("Design Tokens Usage", "Validate consistent use of design tokens instead of hardcoded values", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        const hardcodedPatterns = [
+            // Pixel values (non-responsive)
+            /padding:\s*['"]?\d+px['"]?/g,
+            /margin:\s*['"]?\d+px['"]?/g,
+            /fontSize:\s*['"]?\d+px['"]?/g,
+            /width:\s*['"]?\d+px['"]?/g,
+            /height:\s*['"]?\d+px['"]?/g,
+            /top:\s*['"]?\d+px['"]?/g,
+            /bottom:\s*['"]?\d+px['"]?/g,
+            /left:\s*['"]?\d+px['"]?/g,
+            /right:\s*['"]?\d+px['"]?/g,
+            /gap:\s*['"]?\d+px['"]?/g,
+            /borderRadius:\s*['"]?\d+px['"]?/g,
+            /lineHeight:\s*['"]?\d+px['"]?/g,
+            /letterSpacing:\s*['"]?\d+px['"]?/g,
+            /textIndent:\s*['"]?\d+px['"]?/g,
+            /boxShadow:\s*['"][^"]*\d+px[^"]*['"]?/g,
+            /border:\s*['"][^"]*\d+px[^"]*['"]?/g,
+            /outline:\s*['"][^"]*\d+px[^"]*['"]?/g,
+            // Material-UI sx prop pixel values
+            /(?:mt|mb|ml|mr|mx|my|pt|pb|pl|pr|px|py):\s*['"]?\d+px['"]?/g,
+            // Hardcoded hex colors
+            /color:\s*['"]?#[0-9a-fA-F]{6}['"]?/g,
+            /backgroundColor:\s*['"]?#[0-9a-fA-F]{6}['"]?/g,
+            /borderColor:\s*['"]?#[0-9a-fA-F]{6}['"]?/g,
+        ];
+        let totalHardcoded = 0;
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            let fileHardcoded = 0;
+            const fileViolations = [];
+            for (const pattern of hardcodedPatterns) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    fileHardcoded += matches.length;
+                    fileViolations.push(...matches);
+                }
+            }
+            if (fileHardcoded > 0) {
+                warnings.push(`${file.relativePath} has ${fileHardcoded} hardcoded style values (including non-responsive px units)`);
+                fileViolations.slice(0, 3).forEach((violation) => {
+                    warnings.push(`  - VIOLATION: ${violation}`);
+                });
+                if (fileViolations.length > 3) {
+                    warnings.push(`  - ... and ${fileViolations.length - 3} more violations`);
+                }
+                totalHardcoded += fileHardcoded;
+            }
+        }
+        if (totalHardcoded === 0) {
+            info.push("${chars.check} No hardcoded style values or non-responsive px units detected");
+        }
+        else {
+            info.push(`Found ${totalHardcoded} hardcoded style values (including non-responsive px units) across ${componentFiles.length} files`);
+            info.push("REQUIRED: Replace px values with responsive units (rem, em, %, vw, vh) or design tokens");
+            info.push('EXAMPLES: "16px" ${chars.arrow} "1rem", "24px" → "var(--spacing-6)", "320px" → "20rem"');
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Component Consistency
+    runner.addCheck((0, preflight_runner_1.createCheck)("Component Consistency", "Validate consistent component patterns and structure", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for proper TypeScript interfaces
+            if (content.includes("interface ") && content.includes("Props")) {
+                info.push(`${console_chars_1.chars.check} ${file.name} has TypeScript interface`);
+            }
+            else if (file.extension === ".tsx") {
+                warnings.push(`${file.relativePath} may lack TypeScript interface for props`);
+            }
+            // Check for proper export patterns
+            if (content.includes("export default function") ||
+                content.includes("export default const")) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses proper export pattern`);
+            }
+            else {
+                warnings.push(`${file.relativePath} may not use standard export pattern`);
+            }
+            // Check component size (should be under 400 lines)
+            const lineCount = content.split("\n").length;
+            if (lineCount > 400) {
+                warnings.push(`${file.relativePath} is ${lineCount} lines - consider breaking into smaller components`);
+            }
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Accessibility Validation
+    runner.addCheck((0, preflight_runner_1.createCheck)("Accessibility Validation", "Check for accessibility best practices", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for alt attributes on images
+            const imgTags = content.match(/<img[^>]*>/g);
+            if (imgTags) {
+                for (const img of imgTags) {
+                    if (!img.includes("alt=")) {
+                        warnings.push(`${file.relativePath} has img tag without alt attribute`);
+                    }
+                }
+            }
+            // Check for aria-label or aria-labelledby on interactive elements
+            const interactiveElements = ["button", "input", "select", "textarea"];
+            for (const element of interactiveElements) {
+                const elementRegex = new RegExp(`<${element}[^>]*>`, "g");
+                const elements = content.match(elementRegex);
+                if (elements) {
+                    for (const el of elements) {
+                        if (!el.includes("aria-label") &&
+                            !el.includes("aria-labelledby") &&
+                            !el.includes("aria-describedby") &&
+                            element !== "input") {
+                            warnings.push(`${file.relativePath} has ${element} without aria attributes`);
+                        }
+                    }
+                }
+            }
+            // Check for semantic HTML usage
+            const semanticElements = ["header", "nav", "main", "section", "article", "aside", "footer"];
+            const hasSemanticHTML = semanticElements.some((element) => content.includes(`<${element}`));
+            if (hasSemanticHTML) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses semantic HTML`);
+            }
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Color Contrast Validation
+    runner.addCheck((0, preflight_runner_1.createCheck)("Color Contrast", "Validate color contrast ratios for accessibility", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Check for CSS files with color definitions
+        const styleFiles = await scanner.findFiles(/\.(css|scss|sass)$/);
+        for (const file of styleFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Look for color definitions
+            const colorPattern = /color:\s*#[0-9a-fA-F]{6}/g;
+            const backgroundPattern = /background-color:\s*#[0-9a-fA-F]{6}/g;
+            const colors = content.match(colorPattern);
+            const backgrounds = content.match(backgroundPattern);
+            if (colors || backgrounds) {
+                info.push(`${file.name} contains color definitions - manual contrast check recommended`);
+            }
+        }
+        // Check for common low-contrast combinations
+        const lowContrastPatterns = [
+            /#ffffff.*#f0f0f0/g, // White on light gray
+            /#000000.*#333333/g, // Black on dark gray
+            /#cccccc.*#ffffff/g, // Light gray on white
+        ];
+        for (const file of styleFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            for (const pattern of lowContrastPatterns) {
+                if (pattern.test(content)) {
+                    warnings.push(`${file.relativePath} may have low contrast color combinations`);
+                }
+            }
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Mobile Responsiveness
+    runner.addCheck((0, preflight_runner_1.createCheck)("Mobile Responsiveness", "Check for mobile-responsive design patterns", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const styleFiles = await scanner.findFiles(/\.(css|scss|sass)$/);
+        const componentFiles = await scanner.findComponentFiles();
+        let hasMediaQueries = false;
+        let hasFlexbox = false;
+        let hasGrid = false;
+        // Check CSS files for responsive patterns
+        for (const file of styleFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            if (content.includes("@media")) {
+                hasMediaQueries = true;
+                info.push(`${console_chars_1.chars.check} ${file.name} contains media queries`);
+            }
+            if (content.includes("display: flex") || content.includes("display:flex")) {
+                hasFlexbox = true;
+            }
+            if (content.includes("display: grid") || content.includes("display:grid")) {
+                hasGrid = true;
+            }
+        }
+        // Check component files for responsive patterns
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for Material-UI responsive props
+            if (content.includes("xs=") ||
+                content.includes("sm=") ||
+                content.includes("md=") ||
+                content.includes("lg=")) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses responsive grid props`);
+            }
+            // Check for responsive breakpoint usage
+            if (content.includes("useMediaQuery") || content.includes("breakpoints")) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses responsive breakpoints`);
+            }
+        }
+        if (!hasMediaQueries) {
+            warnings.push("No media queries found - ensure mobile responsiveness");
+        }
+        if (hasFlexbox) {
+            info.push("${chars.check} Flexbox layout detected");
+        }
+        if (hasGrid) {
+            info.push("✓ CSS Grid layout detected");
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Typography Consistency
+    runner.addCheck((0, preflight_runner_1.createCheck)("Typography Consistency", "Validate consistent typography usage", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for Material-UI Typography component usage
+            if (content.includes("<Typography")) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses Typography component`);
+            }
+            // Check for hardcoded font sizes
+            const fontSizePattern = /fontSize:\s*['"]?\d+px['"]?/g;
+            const hardcodedSizes = content.match(fontSizePattern);
+            if (hardcodedSizes) {
+                warnings.push(`${file.relativePath} has ${hardcodedSizes.length} hardcoded font sizes`);
+            }
+            // Check for proper heading hierarchy
+            const headingPattern = /<h[1-6]/g;
+            const headings = content.match(headingPattern);
+            if (headings && headings.length > 0) {
+                info.push(`${console_chars_1.chars.check} ${file.name} uses semantic headings`);
+            }
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // SEO Validation (from seo.ts)
+    runner.addCheck((0, preflight_runner_1.createCheck)("SEO Validation", "Validate meta tags, OpenGraph, and structured data", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Check for robots.txt
+        const robotsExists = await scanner.fileExists("public/robots.txt");
+        if (!robotsExists) {
+            errors.push("Missing robots.txt file in public folder");
+        }
+        else {
+            info.push("${chars.check} robots.txt found");
+        }
+        // Check for ai.txt
+        const aiTxtExists = await scanner.fileExists("public/ai.txt");
+        if (!aiTxtExists) {
+            warnings.push("Missing ai.txt file in public folder (recommended for AI crawlers)");
+        }
+        else {
+            info.push("✓ ai.txt found");
+        }
+        // Check for sitemap
+        const sitemapTsExists = await scanner.fileExists("app/sitemap.ts");
+        const sitemapXmlExists = await scanner.fileExists("public/sitemap.xml");
+        if (!sitemapTsExists && !sitemapXmlExists) {
+            warnings.push("No sitemap found (app/sitemap.ts or public/sitemap.xml)");
+        }
+        else {
+            info.push("✓ Sitemap found");
+        }
+        // Check pages for metadata
+        const pageFiles = await scanner.findFiles(/app\/.*\/page\.(ts|tsx)$/);
+        let pagesWithMetadata = 0;
+        let pagesWithoutMetadata = 0;
+        for (const file of pageFiles) {
+            // Skip API routes
+            if (file.relativePath.includes("/api/"))
+                continue;
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for metadata export or Metadata type in page
+            const hasMetadata = content.includes("export const metadata") || content.includes("generateMetadata");
+            if (hasMetadata) {
+                pagesWithMetadata++;
+                info.push(`${console_chars_1.chars.check} ${file.relativePath} has metadata`);
+            }
+            else {
+                pagesWithoutMetadata++;
+                warnings.push(`${file.relativePath} missing metadata export`);
+            }
+        }
+        info.push(`Pages with metadata: ${pagesWithMetadata}`);
+        if (pagesWithoutMetadata > 0) {
+            warnings.push(`Pages without metadata: ${pagesWithoutMetadata}`);
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Error Boundaries Validation (new)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Error Boundaries", "Validate error.tsx files exist for route segments", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find all route segments (directories with page.tsx)
+        const pageFiles = await scanner.findFiles(/app\/.*\/page\.(ts|tsx)$/);
+        const routeSegments = pageFiles.map((file) => {
+            const dir = file.relativePath.replace(/\/page\.(ts|tsx)$/, "");
+            return dir;
+        });
+        let errorBoundariesFound = 0;
+        let missingErrorBoundaries = 0;
+        for (const segment of routeSegments) {
+            // Skip root app directory
+            if (segment === "app")
+                continue;
+            const errorTsxPath = `${segment}/error.tsx`;
+            const errorTsPath = `${segment}/error.ts`;
+            const errorTsxExists = await scanner.fileExists(errorTsxPath);
+            const errorTsExists = await scanner.fileExists(errorTsPath);
+            if (errorTsxExists || errorTsExists) {
+                errorBoundariesFound++;
+                info.push(`${console_chars_1.chars.check} ${segment} has error boundary`);
+            }
+            else {
+                missingErrorBoundaries++;
+                warnings.push(`${segment} missing error.tsx boundary`);
+            }
+        }
+        info.push(`Route segments with error boundaries: ${errorBoundariesFound}`);
+        if (missingErrorBoundaries > 0) {
+            warnings.push(`Route segments without error boundaries: ${missingErrorBoundaries}`);
+            warnings.push("Consider adding error.tsx files for better error handling");
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Duplicate Components Detection (new)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Duplicate Components", "Detect potentially duplicate component implementations", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        const componentsByName = {};
+        // Group components by name
+        for (const file of componentFiles) {
+            const componentName = file.name.replace(/\.(tsx|jsx)$/, "");
+            if (!componentsByName[componentName]) {
+                componentsByName[componentName] = [];
+            }
+            componentsByName[componentName].push(file.relativePath);
+        }
+        // Find duplicates
+        const duplicates = Object.entries(componentsByName).filter(([name, files]) => files.length > 1);
+        if (duplicates.length > 0) {
+            warnings.push("Potential duplicate components detected:");
+            for (const [name, files] of duplicates) {
+                warnings.push(`  ${name}:`);
+                files.forEach((file) => warnings.push(`    - ${file}`));
+            }
+            warnings.push("Consider consolidating duplicate components or renaming for clarity");
+        }
+        else {
+            info.push("${chars.check} No duplicate component names detected");
+        }
+        info.push(`Total components analyzed: ${componentFiles.length}`);
+        info.push(`Unique component names: ${Object.keys(componentsByName).length}`);
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Page Header Structure Validation (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Page Header Structure", "CRITICAL: Validate all pages have proper UnifiedHeader structure", async () => {
+        console.log(`${console_chars_1.emoji.search} Running Page Header Structure check...`);
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find all page files and client components
+        const pageFiles = await scanner.findFiles(/app\/.*\/(page\.(tsx|ts)|.*Client\.(tsx|ts))$/);
+        // Debug: Log total files found
+        console.log(`Found ${pageFiles.length} page files to check`);
+        let pagesWithPageHeader = 0;
+        let pagesWithNavigationOnly = 0;
+        let pagesMissingHeaders = 0;
+        let totalPagesChecked = 0;
+        for (const file of pageFiles) {
+            // Skip API routes and non-page files
+            if (file.relativePath.includes("/api/") ||
+                file.relativePath.includes("/layout.") ||
+                file.relativePath.includes("/loading.") ||
+                file.relativePath.includes("/error.") ||
+                file.relativePath.includes("/not-found.")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            totalPagesChecked++;
+            const hasUnifiedHeaderNavigation = content.includes("UnifiedHeader") && content.includes('variant="navigation"');
+            const hasUnifiedHeaderPage = content.includes("UnifiedHeader") && content.includes('variant="page"');
+            const hasUnifiedHeaderAdmin = content.includes("UnifiedHeader") && content.includes('variant="admin"');
+            // Check for proper page header structure
+            if (hasUnifiedHeaderPage) {
+                pagesWithPageHeader++;
+                info.push(`${console_chars_1.chars.check} ${file.relativePath} has proper page header`);
+                // Validate page header has required props
+                const pageHeaderMatch = content.match(/<UnifiedHeader[^>]*variant="page"[^>]*>/);
+                if (pageHeaderMatch) {
+                    const headerTag = pageHeaderMatch[0];
+                    if (!headerTag.includes("title=")) {
+                        warnings.push(`${file.relativePath} page header missing title prop`);
+                    }
+                }
+            }
+            else if (hasUnifiedHeaderNavigation && !hasUnifiedHeaderAdmin) {
+                pagesWithNavigationOnly++;
+                // Check if this is a content page that should have a page header
+                const isContentPage = !file.relativePath.includes("/login") &&
+                    !file.relativePath.includes("/register") &&
+                    !file.relativePath.includes("/not-found") &&
+                    !file.relativePath.includes("/loading") &&
+                    !file.relativePath.includes("/error");
+                if (isContentPage) {
+                    errors.push(`CRITICAL: ${file.relativePath} missing page header`);
+                    errors.push(`  - Has navigation header but missing UnifiedHeader variant="page"`);
+                    errors.push(`  - REQUIRED: Add page header for consistent structure`);
+                    errors.push(`  - Standard pattern: Navigation ${console_chars_1.chars.arrow} Breadcrumbs → Page Header → Content`);
+                }
+            }
+            else if (!hasUnifiedHeaderNavigation &&
+                !hasUnifiedHeaderPage &&
+                !hasUnifiedHeaderAdmin) {
+                pagesMissingHeaders++;
+                warnings.push(`${file.relativePath} missing any header component`);
+            }
+        }
+        // Summary
+        info.push(`Total pages checked: ${totalPagesChecked}`);
+        info.push(`Pages with page headers: ${pagesWithPageHeader}`);
+        info.push(`Pages with navigation only: ${pagesWithNavigationOnly}`);
+        info.push(`Pages missing headers: ${pagesMissingHeaders}`);
+        // Critical validation
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} PAGE HEADER STRUCTURE IS CRITICAL FOR CONSISTENCY`);
+            errors.push("All content pages must follow the universal structure:");
+            errors.push('  1. UnifiedHeader variant="navigation" (app navigation)');
+            errors.push("  2. Breadcrumbs component (py: 1)");
+            errors.push('  3. UnifiedHeader variant="page" (page title/description)');
+            errors.push("  4. Page content (no extra margin-top)");
+            errors.push("");
+            errors.push("NO EXCEPTIONS - Every content page must have a page header!");
+        }
+        if (!criticalFailures && pagesWithPageHeader > 0) {
+            info.push(`${console_chars_1.emoji.party} ALL CONTENT PAGES HAVE PROPER HEADER STRUCTURE`);
+            info.push("${chars.check} Navigation headers present");
+            info.push("✓ Page headers present with titles");
+            info.push("✓ Consistent page structure maintained");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Card Grid Spacing Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Card Grid Spacing Consistency", 'CRITICAL: Validate all card grids use consistent gap: "var(--spacing-4)" spacing', async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find all TSX files
+        const allTsxFiles = await scanner.findFiles(/\.tsx$/);
+        let filesWithCorrectSpacing = 0;
+        let filesWithIncorrectSpacing = 0;
+        const incorrectFiles = [];
+        const correctFiles = [];
+        // Patterns for card grid spacing
+        const incorrectSpacingPattern = /gap:\s*["']var\(--spacing-6\)["']/g;
+        const correctSpacingPattern = /gap:\s*["']var\(--spacing-4\)["']/g;
+        for (const file of allTsxFiles) {
+            // Skip node_modules and build files
+            if (file.relativePath.includes("node_modules") ||
+                file.relativePath.includes(".next") ||
+                file.relativePath.includes("dist")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            const incorrectMatches = content.match(incorrectSpacingPattern);
+            const correctMatches = content.match(correctSpacingPattern);
+            if (incorrectMatches) {
+                filesWithIncorrectSpacing++;
+                incorrectFiles.push(`${file.relativePath} (${incorrectMatches.length} occurrences)`);
+                errors.push(`CRITICAL: ${file.relativePath} uses gap: "var(--spacing-6)" instead of "var(--spacing-4)"`);
+            }
+            if (correctMatches) {
+                filesWithCorrectSpacing++;
+                correctFiles.push(`${file.relativePath} (${correctMatches.length} occurrences)`);
+            }
+        }
+        // Summary
+        info.push(`Files with correct card spacing (var(--spacing-4)): ${filesWithCorrectSpacing}`);
+        info.push(`Files with incorrect card spacing (var(--spacing-6)): ${filesWithIncorrectSpacing}`);
+        if (filesWithIncorrectSpacing > 0) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} INCONSISTENT CARD SPACING DETECTED!`);
+            errors.push('All card grids must use gap: "var(--spacing-4)" for consistency.');
+            errors.push("Reference standard: app/seller/analytics/AnalyticsPageClient.tsx");
+            errors.push("");
+            errors.push("Files that need fixing:");
+            incorrectFiles.forEach((file) => errors.push(`  - ${file}`));
+            errors.push("");
+            errors.push('REQUIRED ACTION: Replace gap: "var(--spacing-6)" with gap: "var(--spacing-4)"');
+        }
+        else {
+            info.push(`${console_chars_1.emoji.party} All card grids use consistent spacing!`);
+        }
+        return { passed: filesWithIncorrectSpacing === 0, errors, warnings, info };
+    }));
+    // UI Spacing Consistency - COMPREHENSIVE (ALL PAGES)
+    runner.addCheck((0, preflight_runner_1.createCheck)("UI Spacing Consistency", "CRITICAL: Validate consistent spacing patterns across ALL pages and components", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // 1. CRITICAL: Check Breadcrumbs component for correct tokenized spacing
+        const breadcrumbsFile = await scanner.findFiles(/components\/Breadcrumbs\.(tsx|ts)$/);
+        if (breadcrumbsFile.length > 0) {
+            const content = await scanner.readFileContent(breadcrumbsFile[0].path);
+            if (content) {
+                // Check for incorrect breadcrumbs spacing (should be py: 1, not py: 1.5 or higher)
+                const incorrectSpacingPatterns = [
+                    { pattern: /py:\s*1\.5/g, issue: "py: 1.5 (should be py: 1)" },
+                    { pattern: /py:\s*2/g, issue: "py: 2 (should be py: 1)" },
+                    { pattern: /py:\s*['"]?\d+px['"]?/g, issue: "hardcoded pixels (should be py: 1)" },
+                    {
+                        pattern: /padding:\s*['"]?\d+px\s+\d+px['"]?/g,
+                        issue: "hardcoded padding (should use design tokens)",
+                    },
+                ];
+                let breadcrumbsHasErrors = false;
+                for (const { pattern, issue } of incorrectSpacingPatterns) {
+                    if (pattern.test(content)) {
+                        errors.push(`CRITICAL: Breadcrumbs component has incorrect spacing: ${issue}`);
+                        errors.push("REQUIRED: Use py: 1 for consistent spacing hierarchy");
+                        breadcrumbsHasErrors = true;
+                    }
+                }
+                if (!breadcrumbsHasErrors && content.includes("py: 1")) {
+                    info.push("${chars.check} Breadcrumbs component uses correct tokenized spacing (py: 1)");
+                }
+            }
+        }
+        else {
+            warnings.push("Breadcrumbs component not found - ensure it exists and uses py: 1");
+        }
+        // 2. COMPREHENSIVE: Check ALL pages for spacing consistency (not just seller pages)
+        const allPageFiles = await scanner.findFiles(/app\/.*\/page\.(tsx|ts)$/);
+        const allClientFiles = await scanner.findFiles(/app\/.*Client\.(tsx|ts)$/);
+        const allLayoutFiles = await scanner.findFiles(/app\/.*\/layout\.(tsx|ts)$/);
+        // Combine all page-related files
+        const allPageRelatedFiles = [...allPageFiles, ...allClientFiles, ...allLayoutFiles];
+        let totalPagesChecked = 0;
+        let pagesWithCorrectSpacing = 0;
+        let pagesWithIncorrectSpacing = 0;
+        // Enhanced patterns for detecting spacing violations
+        const spacingViolationPatterns = {
+            // Excessive margins after headers
+            excessiveMarginTop: [
+                /<(?:Stack|Box|Container|Grid)[^>]*sx=\{[^}]*mt:\s*["']var\(--spacing-[6-9]\)["'][^}]*\}/g,
+                /<(?:Stack|Box|Container|Grid)[^>]*sx=\{[^}]*marginTop:\s*["']var\(--spacing-[6-9]\)["'][^}]*\}/g,
+            ],
+            // Hardcoded pixel spacing
+            hardcodedPixels: [
+                /(?:margin|padding|gap):\s*['"]?\d+px['"]?/g,
+                /(?:mt|mb|ml|mr|pt|pb|pl|pr|px|py):\s*['"]?\d+px['"]?/g,
+                /(?:marginTop|marginBottom|paddingTop|paddingBottom):\s*['"]?\d+px['"]?/g,
+            ],
+            // Non-tokenized numeric spacing (except Material-UI standard values like py: 1, 2, 3, 4)
+            nonTokenizedSpacing: [
+                /(?:mt|mb|ml|mr|pt|pb|pl|pr):\s*['"]?\d{2}['"]?/g, // Numbers >= 10 should use tokens
+                /(?:margin|padding):\s*['"]?\d{2}['"]?/g,
+            ],
+            // Inconsistent decimal spacing (like py: 1.5, 2.5, etc.)
+            inconsistentDecimalSpacing: [/(?:py|px|pt|pb|pl|pr):\s*\d+\.\d+/g],
+            // NEW: Inconsistent gap spacing between cards/components
+            inconsistentGapSpacing: [
+                /gap:\s*['"]?\d+px['"]?/g, // Hardcoded pixel gaps
+                /gap:\s*['"]?(?:10|12|14|15|18|20|22|25|28|30)['"]?/g, // Non-standard gap values
+                /gridGap:\s*['"]?\d+px['"]?/g, // Hardcoded grid gaps
+            ],
+            // NEW: Card grid spacing inconsistency (should use var(--spacing-4) standard)
+            inconsistentCardGridSpacing: [
+                /gap:\s*["']var\(--spacing-6\)["']/g, // Should be var(--spacing-4) for consistency
+                /gap:\s*["']var\(--spacing-[5789]\)["']/g, // Non-standard spacing values
+            ],
+            // NEW: Mixed spacing units within same component
+            mixedSpacingUnits: [
+                /sx=\{[^}]*(?:gap:\s*["']var\(--spacing-\d+\)["'][^}]*(?:mt|mb|ml|mr|pt|pb|pl|pr):\s*\d+[^}]*|(?:mt|mb|ml|mr|pt|pb|pl|pr):\s*\d+[^}]*gap:\s*["']var\(--spacing-\d+\)["'])/g,
+            ],
+            // NEW: Inconsistent card grid spacing
+            inconsistentCardGrids: [
+                /gridTemplateColumns:[^}]*gap:\s*['"]?(?!var\(--spacing-[346]\))['"]?[^}]*\}/g, // Non-standard grid gaps
+                /display:\s*["']grid["'][^}]*gap:\s*['"]?\d+px['"]?/g, // Hardcoded grid gaps
+            ],
+            // NEW: Header-to-card spacing inconsistency
+            headerCardSpacingInconsistency: [
+                /UnifiedHeader[^>]*\/>[^{]*\{[^}]*display:\s*["']grid["'][^}]*gap:\s*["']var\(--spacing-6\)["'][^}]*(?!mt:\s*["']var\(--spacing-3\)["'])/g,
+            ],
+            // NEW: Inconsistent page-wide spacing (breadcrumbs to header to content)
+            inconsistentPageSpacing: [
+                // Page with UnifiedHeader page variant that doesn't have consistent mt: var(--spacing-6)
+                /UnifiedHeader[^>]*variant=["']page["'][^>]*(?!.*sx=\{[^}]*mt:\s*["']var\(--spacing-6\)["'])/g,
+                // Container with py padding that breaks consistent spacing
+                /Box[^>]*sx=\{[^}]*py:\s*["']var\(--spacing-[4-9]\)["'][^}]*\}[^>]*>[^<]*<UnifiedHeader[^>]*variant=["']page["']/g,
+                // Missing consistent spacing between major page sections
+                /\{\/\*[^}]*Cards?\*\/\}[^<]*<(?:Box|Card)[^>]*(?!.*mt:\s*["']var\(--spacing-6\)["'])/g,
+                // Horizontal spacing inconsistent with vertical spacing (should match)
+                /px:\s*["']var\(--spacing-4\)["'][^}]*\}[^>]*>[^<]*<UnifiedHeader[^>]*variant=["']page["'][^>]*sx=\{[^}]*mt:\s*["']var\(--spacing-6\)["']/g,
+            ],
+        };
+        for (const file of allPageRelatedFiles) {
+            // Skip API routes
+            if (file.relativePath.includes("/api/"))
+                continue;
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            totalPagesChecked++;
+            let pageHasSpacingIssues = false;
+            // Check for excessive margin-top after headers
+            for (const pattern of spacingViolationPatterns.excessiveMarginTop) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    pagesWithIncorrectSpacing++;
+                    errors.push(`${file.relativePath} has excessive margin-top after header components`);
+                    matches.forEach((match) => {
+                        errors.push(`  - VIOLATION: ${match.substring(0, 80)}...`);
+                    });
+                    errors.push("  - REQUIRED: Remove excessive margin-top, headers provide their own spacing");
+                    break;
+                }
+            }
+            // Check for hardcoded pixel values
+            for (const pattern of spacingViolationPatterns.hardcodedPixels) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} uses hardcoded pixel spacing`);
+                    matches.slice(0, 3).forEach((match) => {
+                        // Limit to first 3 matches
+                        warnings.push(`  - HARDCODED: ${match}`);
+                    });
+                    warnings.push("  - REQUIRED: Use design tokens like var(--spacing-4)");
+                    break;
+                }
+            }
+            // Check for non-tokenized large numeric spacing
+            for (const pattern of spacingViolationPatterns.nonTokenizedSpacing) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} uses non-tokenized large spacing values`);
+                    matches.slice(0, 3).forEach((match) => {
+                        warnings.push(`  - NON-TOKENIZED: ${match}`);
+                    });
+                    warnings.push("  - REQUIRED: Use design tokens for values >= 10");
+                    break;
+                }
+            }
+            // Check for inconsistent decimal spacing
+            for (const pattern of spacingViolationPatterns.inconsistentDecimalSpacing) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    // Special case for py: 1.5 in breadcrumbs (already caught above)
+                    if (!file.relativePath.includes("Breadcrumbs")) {
+                        warnings.push(`${file.relativePath} uses inconsistent decimal spacing`);
+                        matches.slice(0, 3).forEach((match) => {
+                            warnings.push(`  - INCONSISTENT: ${match} (use whole numbers: py: 1, py: 2, etc.)`);
+                        });
+                    }
+                    break;
+                }
+            }
+            // NEW: Check for inconsistent gap spacing between cards/components
+            for (const pattern of spacingViolationPatterns.inconsistentGapSpacing) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} uses inconsistent gap spacing between components`);
+                    matches.slice(0, 3).forEach((match) => {
+                        warnings.push(`  - INCONSISTENT GAP: ${match}`);
+                    });
+                    warnings.push("  - REQUIRED: Use standard gaps: var(--spacing-3), var(--spacing-4), var(--spacing-6)");
+                    break;
+                }
+            }
+            // NEW: Check for card grid spacing inconsistency (should be var(--spacing-4))
+            for (const pattern of spacingViolationPatterns.inconsistentCardGridSpacing) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    errors.push(`CRITICAL: ${file.relativePath} uses inconsistent card grid spacing`);
+                    matches.slice(0, 3).forEach((match) => {
+                        errors.push(`  - INCONSISTENT CARD SPACING: ${match}`);
+                    });
+                    errors.push('  - REQUIRED: Use gap: "var(--spacing-4)" for consistent card grid spacing');
+                    errors.push("  - STANDARD: All card grids should use 16px gaps like /seller/analytics");
+                    break;
+                }
+            }
+            // NEW: Check for mixed spacing units within same component
+            for (const pattern of spacingViolationPatterns.mixedSpacingUnits) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} mixes different spacing unit types in same component`);
+                    matches.slice(0, 2).forEach((match) => {
+                        warnings.push(`  - MIXED UNITS: ${match.substring(0, 60)}...`);
+                    });
+                    warnings.push("  - REQUIRED: Use consistent spacing units (all design tokens or all Material-UI units)");
+                    break;
+                }
+            }
+            // NEW: Check for inconsistent card grid spacing
+            for (const pattern of spacingViolationPatterns.inconsistentCardGrids) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} uses inconsistent spacing in card grids`);
+                    matches.slice(0, 2).forEach((match) => {
+                        warnings.push(`  - INCONSISTENT GRID: ${match.substring(0, 60)}...`);
+                    });
+                    warnings.push("  - REQUIRED: Use standard grid gaps: var(--spacing-4) (standard), var(--spacing-3) (compact)");
+                    break;
+                }
+            }
+            // NEW: Check for header-to-card spacing inconsistency
+            for (const pattern of spacingViolationPatterns.headerCardSpacingInconsistency) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} has inconsistent spacing between header and card grid`);
+                    matches.slice(0, 2).forEach((match) => {
+                        warnings.push(`  - HEADER-CARD GAP: ${match.substring(0, 60)}...`);
+                    });
+                    warnings.push('  - REQUIRED: Use consistent mt: "var(--spacing-4)" for standard spacing throughout page');
+                    break;
+                }
+            }
+            // NEW: Check for inconsistent page-wide spacing
+            for (const pattern of spacingViolationPatterns.inconsistentPageSpacing) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    pageHasSpacingIssues = true;
+                    warnings.push(`${file.relativePath} has inconsistent page-wide spacing`);
+                    matches.slice(0, 2).forEach((match) => {
+                        warnings.push(`  - SPACING INCONSISTENCY: ${match.substring(0, 60)}...`);
+                    });
+                    warnings.push("  - REQUIRED: Use consistent var(--spacing-4) spacing throughout entire page");
+                    warnings.push("  - PATTERN: Breadcrumbs ${chars.arrow} Header (16px) → Content (16px) → Sections (16px)");
+                    warnings.push("  - HORIZONTAL: Use px: var(--spacing-4) to match vertical spacing rhythm");
+                    break;
+                }
+            }
+            if (!pageHasSpacingIssues) {
+                pagesWithCorrectSpacing++;
+                info.push(`${console_chars_1.chars.check} ${file.relativePath} follows spacing standards`);
+            }
+        }
+        // 3. COMPREHENSIVE: Check ALL components for design token usage
+        const allComponentFiles = await scanner.findFiles(/\.(tsx|ts)$/);
+        let totalFilesChecked = 0;
+        let filesWithHardcodedSpacing = 0;
+        let filesWithCorrectTokens = 0;
+        for (const file of allComponentFiles) {
+            // Skip node_modules, build files, and test files
+            if (file.relativePath.includes("node_modules") ||
+                file.relativePath.includes(".next") ||
+                file.relativePath.includes("dist") ||
+                file.relativePath.includes(".test.") ||
+                file.relativePath.includes(".spec.")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            totalFilesChecked++;
+            // Check for hardcoded spacing values
+            const hasHardcodedSpacing = spacingViolationPatterns.hardcodedPixels.some((pattern) => pattern.test(content));
+            // Check for proper design token usage
+            const hasDesignTokens = /var\(--spacing-\d+\)/.test(content);
+            if (hasHardcodedSpacing) {
+                filesWithHardcodedSpacing++;
+            }
+            else if (hasDesignTokens) {
+                filesWithCorrectTokens++;
+            }
+        }
+        // 4. SPECIFIC: Check critical layout components
+        const criticalComponents = [
+            "components/UnifiedHeader.tsx",
+            "components/Breadcrumbs.tsx",
+            "components/PageLayout.tsx",
+            "components/LayoutSystem.tsx",
+        ];
+        for (const componentPath of criticalComponents) {
+            const componentExists = await scanner.fileExists(componentPath);
+            if (componentExists) {
+                const content = await scanner.readFileContent(componentPath);
+                if (content) {
+                    // Check for proper spacing patterns in critical components
+                    const hasProperSpacing = /var\(--spacing-\d+\)|py:\s*[1-4](?!\.\d)|px:\s*[1-4](?!\.\d)/.test(content);
+                    if (hasProperSpacing) {
+                        info.push(`${console_chars_1.chars.check} ${componentPath} uses proper spacing patterns`);
+                    }
+                    else {
+                        warnings.push(`${componentPath} may need spacing pattern review`);
+                    }
+                }
+            }
+        }
+        // 5. SUMMARY AND REQUIREMENTS
+        info.push(`Total pages/components checked: ${totalPagesChecked}`);
+        info.push(`Pages with correct spacing: ${pagesWithCorrectSpacing}`);
+        info.push(`Total files scanned for tokens: ${totalFilesChecked}`);
+        info.push(`Files using design tokens: ${filesWithCorrectTokens}`);
+        if (pagesWithIncorrectSpacing > 0) {
+            errors.push(`CRITICAL: ${pagesWithIncorrectSpacing} pages have spacing violations`);
+            errors.push("REQUIRED STANDARDS:");
+            errors.push("  - Breadcrumbs: py: 1 (not py: 1.5)");
+            errors.push("  - Page-wide consistency: Breadcrumbs ${chars.arrow} Header → Content (all 16px gaps)");
+            errors.push("  - Headers: Use mt: var(--spacing-4) for consistent spacing");
+            errors.push("  - Content: No excessive margin-top after headers");
+            errors.push("  - Card Grids: Use consistent gaps (var(--spacing-4) standard, var(--spacing-3) compact)");
+            errors.push("  - All spacing: Use design tokens var(--spacing-X)");
+            errors.push('  - CRITICAL: All card grids must use gap: "var(--spacing-4)" for consistency');
+        }
+        if (filesWithHardcodedSpacing > 0) {
+            warnings.push(`${filesWithHardcodedSpacing} files use hardcoded spacing values`);
+            warnings.push("TOKENIZATION REQUIRED:");
+            warnings.push('  - Replace "24px" with "var(--spacing-6)"');
+            warnings.push('  - Replace "16px" with "var(--spacing-4)"');
+            warnings.push('  - Replace "8px" with "var(--spacing-2)"');
+            warnings.push("  - Card gaps: Use var(--spacing-4) for card grids");
+            warnings.push("  - Page consistency: All major sections should have 16px gaps");
+            warnings.push('  - STANDARD: Follow /seller/analytics pattern with gap: "var(--spacing-4)"');
+            warnings.push("  - Use Material-UI units (py: 1, 2, 3, 4) for small values");
+            warnings.push("  - Avoid mixed spacing units in same component");
+        }
+        // CRITICAL: This check must pass for consistent UX
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} SPACING CONSISTENCY IS CRITICAL FOR USER EXPERIENCE`);
+            errors.push("All pages must follow the same spacing hierarchy:");
+            errors.push("Navigation ${chars.arrow} Breadcrumbs (py: 1) → Page Header → Content");
+            errors.push("No exceptions. No page-specific spacing rules.");
+        }
+        if (!criticalFailures && warnings.length === 0) {
+            info.push(`${console_chars_1.emoji.party} ALL PAGES FOLLOW CONSISTENT SPACING STANDARDS`);
+            info.push("${chars.check} Breadcrumbs use correct tokenized spacing");
+            info.push("✓ Headers have consistent spacing hierarchy");
+            info.push("✓ Design tokens used throughout");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Sidebar Width Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Sidebar Width Consistency", "CRITICAL: Ensure all sidebars use consistent width for header alignment", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Check for hardcoded sidebar widths that don't match the standard
+        const sidebarFiles = [
+            "components/SellerSidebar.tsx",
+            "components/DashboardSidebar.tsx",
+            "components/filters/SportsCardsFilter.tsx",
+            "components/filters/TradingCardGamesFilter.tsx",
+            "components/filters/VideoGamesFilter.tsx",
+            "components/filters/FilterContainer.tsx",
+            "components/SearchFiltersEnhanced.tsx",
+        ];
+        const hardcodedWidthPattern = /width:\s*(?:config\.width\s*\|\|\s*)?(\d+)/g;
+        const constantWidthPattern = /const\s+SIDEBAR_WIDTH\s*=\s*(\d+)/g;
+        for (const filePath of sidebarFiles) {
+            try {
+                const content = await scanner.readFileContent(filePath);
+                if (!content)
+                    continue;
+                // Check for hardcoded widths
+                let match;
+                while ((match = hardcodedWidthPattern.exec(content)) !== null) {
+                    const width = parseInt(match[1] || "");
+                    if (width !== 260 && width !== 64) {
+                        // 64 is collapsed width
+                        errors.push(`${filePath}: Hardcoded width ${width}px should use SIDEBAR_WIDTH constant (260px)`);
+                    }
+                }
+                // Check for local constants that don't match
+                while ((match = constantWidthPattern.exec(content)) !== null) {
+                    const width = parseInt(match[1] || "");
+                    if (width !== 260) {
+                        errors.push(`${filePath}: Local SIDEBAR_WIDTH constant ${width}px should be 260px`);
+                    }
+                }
+                // Check if file imports the shared constant
+                if (content.includes("SIDEBAR_WIDTH") &&
+                    !content.includes('from "@/lib/sidebar-constants"')) {
+                    warnings.push(`${filePath}: Should import SIDEBAR_WIDTH from @/lib/sidebar-constants`);
+                }
+                if (content.includes('from "@/lib/sidebar-constants"')) {
+                    info.push(`${console_chars_1.chars.check} ${filePath} uses shared sidebar constants`);
+                }
+            }
+            catch (error) {
+                // File might not exist, skip silently
+            }
+        }
+        // Check category page clients for consistent usage
+        const categoryPageFiles = await scanner.findFiles(/CategoryPageClient\.tsx$/);
+        for (const file of categoryPageFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            if (content.includes("SIDEBAR_WIDTH") &&
+                !content.includes('from "@/lib/sidebar-constants"')) {
+                warnings.push(`${file.relativePath}: Should import SIDEBAR_WIDTH from @/lib/sidebar-constants`);
+            }
+        }
+        return { passed: errors.length === 0, errors, warnings, info };
+    }));
+    // Sidebar-to-Content Spacing Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Sidebar-to-Content Spacing Consistency", "CRITICAL: Ensure consistent spacing between sidebars and main content across all pages", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // 1. Check FilterContainer for margin-right violations
+        const filterContainerFile = await scanner.findFiles(/components\/filters\/FilterContainer\.tsx$/);
+        if (filterContainerFile.length > 0) {
+            const content = await scanner.readFileContent(filterContainerFile[0].path);
+            if (content) {
+                // Check for margin-right that creates extra spacing
+                const marginRightPattern = /mr:\s*[1-9]/g;
+                const marginRightMatches = content.match(marginRightPattern);
+                if (marginRightMatches) {
+                    errors.push("CRITICAL: FilterContainer has margin-right that creates inconsistent spacing");
+                    marginRightMatches.forEach((match) => {
+                        errors.push(`  - VIOLATION: ${match} creates extra gap between sidebar and content`);
+                    });
+                    errors.push("  - REQUIRED: Remove margin-right from FilterContainercomponent");
+                    errors.push('  - STANDARD: Sidebars should have no margin-right, content should have px: "var(--spacing-4)"');
+                }
+                else {
+                    info.push("${chars.check} FilterContainer has no margin-right violations");
+                }
+            }
+        }
+        // 2. Check DashboardSidebar for correct spacing pattern (reference standard)
+        const dashboardSidebarFile = await scanner.findFiles(/components\/DashboardSidebar\.tsx$/);
+        if (dashboardSidebarFile.length > 0) {
+            const content = await scanner.readFileContent(dashboardSidebarFile[0].path);
+            if (content) {
+                // Verify DashboardSidebar doesn't have margin-right
+                const hasMarginRight = /mr:\s*[1-9]/.test(content);
+                if (hasMarginRight) {
+                    errors.push("CRITICAL: DashboardSidebar should not have margin-right");
+                }
+                else {
+                    info.push("✓ DashboardSidebar follows correct spacing pattern (no margin-right)");
+                }
+            }
+        }
+        // 3. Check category pages for consistent main content padding
+        const categoryPageFiles = await scanner.findFiles(/CategoryPageClient\.tsx$/);
+        let categoryPagesWithCorrectSpacing = 0;
+        let categoryPagesWithIncorrectSpacing = 0;
+        for (const file of categoryPageFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check for consistent px: "var(--spacing-4)" in main content area
+            const hasCorrectContentPadding = /px:\s*["']var\(--spacing-4\)["']/.test(content);
+            // Check for nested padding that might create inconsistency
+            const hasNestedPadding = /px:\s*["']var\(--spacing-4\)["'][^}]*\}[^>]*>[^<]*<[^>]*sx=\{[^}]*px:\s*["']var\(--spacing-4\)["']/.test(content);
+            if (hasCorrectContentPadding && !hasNestedPadding) {
+                categoryPagesWithCorrectSpacing++;
+                info.push(`✓ ${file.relativePath} has consistent content padding`);
+            }
+            else if (!hasCorrectContentPadding) {
+                categoryPagesWithIncorrectSpacing++;
+                errors.push(`CRITICAL: ${file.relativePath} missing consistent content padding`);
+                errors.push('  - REQUIRED: Main content area must have px: "var(--spacing-4)"');
+                errors.push("  - PATTERN: Same as account dashboard - sidebar (no margin) + content (px: var(--spacing-4))");
+            }
+            else if (hasNestedPadding) {
+                categoryPagesWithIncorrectSpacing++;
+                warnings.push(`${file.relativePath} has nested padding that may create inconsistency`);
+                warnings.push("  - Review: Ensure padding is applied to outer container, not nested elements");
+            }
+        }
+        // 4. Check account dashboard for reference pattern
+        const accountDashboardFiles = await scanner.findFiles(/app\/account\/dashboard\/.*Client\.tsx$/);
+        if (accountDashboardFiles.length > 0) {
+            const content = await scanner.readFileContent(accountDashboardFiles[0].path);
+            if (content) {
+                const hasCorrectPattern = /px:\s*["']var\(--spacing-4\)["']/.test(content);
+                if (hasCorrectPattern) {
+                    info.push("${chars.check} Account dashboard uses correct spacing pattern (reference standard)");
+                }
+                else {
+                    warnings.push("Account dashboard spacing pattern may have changed - verify consistency");
+                }
+            }
+        }
+        // 5. Summary and requirements
+        info.push(`Category pages with correct spacing: ${categoryPagesWithCorrectSpacing}`);
+        if (categoryPagesWithIncorrectSpacing > 0) {
+            errors.push(`CRITICAL: ${categoryPagesWithIncorrectSpacing} category pages have spacing inconsistencies`);
+            errors.push("");
+            errors.push("REQUIRED SPACING PATTERN:");
+            errors.push("  1. Sidebar components: NO margin-right");
+            errors.push('  2. Main content container: px: "var(--spacing-4)"');
+            errors.push("  3. Consistent with account dashboard pattern");
+            errors.push("  4. No nested padding in main content area");
+            errors.push("");
+            errors.push("REFERENCE: /account/dashboard has correct sidebar-to-content spacing");
+        }
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} SIDEBAR-TO-CONTENT SPACING MUST BE CONSISTENT`);
+            errors.push("Users expect the same spacing between sidebar and cards on all pages");
+            errors.push("Account dashboard (/account/dashboard) is the reference standard");
+            errors.push("Category pages (/trading-card-games/*, /sports-cards/*) must match exactly");
+        }
+        if (!criticalFailures) {
+            info.push(`${console_chars_1.emoji.party} ALL PAGES HAVE CONSISTENT SIDEBAR-TO-CONTENT SPACING`);
+            info.push("${chars.check} FilterContainer has no margin-right violations");
+            info.push("✓ Category pages match account dashboard spacing");
+            info.push('✓ Main content areas use consistent px: "var(--spacing-4)"');
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Header Spacing Consistency (CRITICAL) - Module not yet implemented
+    // runner.addCheck(createCheck(
+    //   'Header Spacing Consistency',
+    //   'CRITICAL: Validate consistent spacing between navigation, breadcrumbs, and page headers',
+    //   async () => {
+    //     return validateHeaderSpacing() as Promise<PreflightResult>;
+    //   }
+    // ));
+    // KPI Box Width Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("KPI Box Width Consistency", "CRITICAL: Ensure all KPI/statistics boxes have consistent widths for professional appearance", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find files that contain KPI/statistics boxes
+        const kpiFiles = await scanner.findFiles(/\.(tsx|ts)$/);
+        let filesWithInconsistentKPIs = 0;
+        let filesWithConsistentKPIs = 0;
+        const inconsistentFiles = [];
+        for (const file of kpiFiles) {
+            // Skip non-relevant files
+            if (file.relativePath.includes("node_modules") ||
+                file.relativePath.includes(".next") ||
+                file.relativePath.includes("dist")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Look for KPI/statistics card patterns
+            const hasKPICards = content.includes("Statistics Cards") ||
+                content.includes("KPI") ||
+                content.includes("Total Listings") ||
+                content.includes("Active") ||
+                content.includes("Pending") ||
+                content.includes("Draft") ||
+                content.includes("Sold") ||
+                (content.includes("<Grid") &&
+                    content.includes("CardContent") &&
+                    content.includes("Typography") &&
+                    content.includes('variant="h4"'));
+            // SPECIFIC CHECK: Admin Analytics page card consistency
+            const isAdminAnalytics = file.relativePath.includes("admin/analytics/AdminAnalyticsClient");
+            if (isAdminAnalytics) {
+                // Check for consistent card width properties
+                const hasConsistentCardWidths = content.includes("width: '100%'") &&
+                    content.includes("maxWidth: '100%'") &&
+                    content.includes("boxSizing: 'border-box'");
+                // Check for MetricCard component with proper width styling
+                const metricCardHasWidth = content.includes("function MetricCard") && content.includes("width: '100%'");
+                const hasProperMetricCard = metricCardHasWidth;
+                if (!hasConsistentCardWidths || !hasProperMetricCard) {
+                    filesWithInconsistentKPIs++;
+                    inconsistentFiles.push(file.relativePath);
+                    errors.push(`CRITICAL: ${file.relativePath} (Admin Analytics) has inconsistent card widths`);
+                    errors.push("  - ISSUE: Cards may have different visual widths due to content differences");
+                    errors.push('  - REQUIRED: All cards must have width: "100%", maxWidth: "100%", boxSizing: "border-box"');
+                    errors.push("  - REQUIRED: MetricCard component must enforce consistent dimensions");
+                    errors.push("  - IMPACT: Professional dashboard appearance requires uniform card sizes");
+                }
+                else {
+                    filesWithConsistentKPIs++;
+                    info.push(`${console_chars_1.chars.check} ${file.relativePath} (Admin Analytics) has consistent card widths`);
+                }
+                continue; // Skip general checks for this specific file
+            }
+            // Check for proper KPI layout patterns
+            const hasProperGridLayout = content.includes("gridTemplateColumns: 'repeat(") ||
+                content.includes('gridTemplateColumns: "repeat(');
+            const hasConsistentMaterialUIGrid = content.includes("md={2.4}") &&
+                !content.includes("md={3}") &&
+                !content.includes("md={2}") &&
+                !content.includes("md={4}");
+            // Check for problematic patterns that cause width inconsistencies
+            const hasProblematicPattern = hasKPICards &&
+                content.includes("<Grid") &&
+                content.includes("CardContent") &&
+                !hasProperGridLayout &&
+                !content.includes("height: '100%'") &&
+                !content.includes("display: 'flex'");
+            const hasProperKPILayout = hasProperGridLayout || hasConsistentMaterialUIGrid;
+            if (!hasKPICards)
+                continue;
+            // Check for inconsistent Grid item widths in KPI sections
+            const gridItemPattern = /<Grid\s+item[^>]*(?:xs|sm|md|lg|xl)=\{?([^}>\s]+)\}?[^>]*>/g;
+            const gridItems = [];
+            let match;
+            while ((match = gridItemPattern.exec(content)) !== null) {
+                // Look for the full Grid item tag to get all breakpoint props
+                const fullMatch = match[0] || "";
+                gridItems.push(fullMatch);
+            }
+            if (gridItems.length >= 4) {
+                // Likely KPI boxes if 4+ grid items
+                // Check if all grid items have consistent breakpoint values
+                const breakpointValues = {};
+                let hasInconsistentWidths = false;
+                for (const item of gridItems) {
+                    // Extract breakpoint values (xs, sm, md, lg, xl)
+                    const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+                    for (const bp of breakpoints) {
+                        const bpPattern = new RegExp(`${bp}=\\{?([^}\\s>]+)\\}?`);
+                        const bpMatch = item.match(bpPattern);
+                        if (bpMatch && bpMatch[1]) {
+                            if (!breakpointValues[bp]) {
+                                breakpointValues[bp] = new Set();
+                            }
+                            breakpointValues[bp].add(bpMatch[1]);
+                        }
+                    }
+                }
+                // Check for inconsistencies
+                for (const [breakpoint, values] of Object.entries(breakpointValues)) {
+                    if (values.size > 1) {
+                        hasInconsistentWidths = true;
+                        errors.push(`CRITICAL: ${file.relativePath} has inconsistent KPI box widths at ${breakpoint} breakpoint`);
+                        errors.push(`  - VALUES FOUND: ${Array.from(values).join(", ")}`);
+                        errors.push(`  - REQUIRED: All KPI boxes must have identical width values`);
+                        errors.push(`  - EXAMPLE: All should use md={2.4} or md={3} consistently`);
+                    }
+                }
+                if (hasInconsistentWidths) {
+                    filesWithInconsistentKPIs++;
+                    inconsistentFiles.push(file.relativePath);
+                    // Show the problematic grid items
+                    errors.push(`  - PROBLEMATIC GRID ITEMS:`);
+                    gridItems.slice(0, 5).forEach((item, index) => {
+                        errors.push(`    ${index + 1}. ${item.substring(0, 80)}...`);
+                    });
+                }
+                else if (hasProblematicPattern) {
+                    // Check for problematic patterns that cause visual inconsistencies
+                    filesWithInconsistentKPIs++;
+                    inconsistentFiles.push(file.relativePath);
+                    errors.push(`CRITICAL: ${file.relativePath} has KPI boxes with problematic layout causing width inconsistencies`);
+                    errors.push(`  - ISSUE: Basic Material-UI Grid without flex properties causes text-based width differences`);
+                    errors.push(`  - PROBLEM: "Total Listings" text is longer than "Active", causing visual width differences`);
+                    errors.push(`  - SOLUTION 1 (PREFERRED): Use CSS Grid with gridTemplateColumns: 'repeat(5, 1fr)'`);
+                    errors.push(`  - SOLUTION 2: Add proper flex properties to force equal widths`);
+                    errors.push(`  - EXAMPLE: <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 3 }}>`);
+                    errors.push(`  - REQUIRED: All KPI boxes must appear visually identical in width`);
+                }
+                else if (hasKPICards && !hasProperKPILayout) {
+                    // Check for missing proper layout that ensures visual consistency
+                    filesWithInconsistentKPIs++;
+                    inconsistentFiles.push(file.relativePath);
+                    errors.push(`CRITICAL: ${file.relativePath} has KPI boxes without proper layout for equal widths`);
+                    errors.push(`  - ISSUE: KPI boxes may have inconsistent visual widths due to text content differences`);
+                    errors.push(`  - SOLUTION 1: Use CSS Grid with gridTemplateColumns: 'repeat(5, 1fr)' for 5 equal boxes`);
+                    errors.push(`  - SOLUTION 2: Use Material-UI Grid with consistent md={2.4} for all 5 boxes`);
+                    errors.push(`  - EXAMPLE: <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 3 }}>`);
+                    errors.push(`  - REQUIRED: All KPI boxes must appear visually identical in width`);
+                }
+                else {
+                    filesWithConsistentKPIs++;
+                    info.push(`${console_chars_1.chars.check} ${file.relativePath} has consistent KPI box widths`);
+                }
+            }
+        }
+        // Summary
+        info.push(`Files with consistent KPI boxes: ${filesWithConsistentKPIs}`);
+        if (filesWithInconsistentKPIs > 0) {
+            errors.push(`CRITICAL: ${filesWithInconsistentKPIs} files have inconsistent KPI box widths`);
+            errors.push("");
+            errors.push("FILES WITH INCONSISTENT KPI BOXES:");
+            inconsistentFiles.forEach((file) => errors.push(`  - ${file}`));
+            errors.push("");
+            errors.push("REQUIRED STANDARDS:");
+            errors.push("  - All KPI/statistics boxes must have identical visual widths");
+            errors.push('  - ADMIN ANALYTICS: Cards must have width: "100%", maxWidth: "100%", boxSizing: "border-box"');
+            errors.push('  - PREFERRED: Use CSS Grid with gridTemplateColumns: "repeat(N, 1fr)"');
+            errors.push("  - ALTERNATIVE: Use Material-UI Grid with consistent md values");
+            errors.push('  - Example: 5 boxes = gridTemplateColumns: "repeat(5, 1fr)" OR md={2.4}');
+            errors.push('  - Example: 4 boxes = gridTemplateColumns: "repeat(4, 1fr)" OR md={3}');
+            errors.push('  - Example: 3 boxes = gridTemplateColumns: "repeat(3, 1fr)" OR md={4}');
+            errors.push("");
+            errors.push("VISUAL IMPACT: Inconsistent widths look unprofessional and break layout harmony");
+            errors.push('TEXT CONTENT ISSUE: Longer labels like "Total Listings" vs "Active" cause width differences');
+        }
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} KPI BOX WIDTH CONSISTENCY IS CRITICAL FOR PROFESSIONAL APPEARANCE`);
+            errors.push("Users notice when dashboard elements have different widths");
+            errors.push("All statistics/KPI boxes must be perfectly aligned and sized");
+            errors.push("ADMIN ANALYTICS: Uniform card widths are essential for professional dashboard");
+        }
+        if (!criticalFailures && filesWithConsistentKPIs > 0) {
+            info.push(`${console_chars_1.emoji.party} ALL KPI BOXES HAVE CONSISTENT WIDTHS`);
+            info.push("${chars.check} Professional dashboard appearance maintained");
+            info.push("✓ Grid layouts are perfectly aligned");
+            info.push("✓ Admin Analytics cards have uniform dimensions");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Footer Component Validation (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Footer Component Validation", "CRITICAL: Ensure all admin and page components include Footer component", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find all admin client components and page files
+        const adminFiles = await scanner.findFiles(/app\/admin\/.*Client\.(tsx|ts)$/);
+        const sellerFiles = await scanner.findFiles(/app\/seller\/.*Client\.(tsx|ts)$/);
+        const accountFiles = await scanner.findFiles(/app\/account\/.*Client\.(tsx|ts)$/);
+        const pageFiles = await scanner.findFiles(/app\/.*\/page\.(tsx|ts)$/);
+        // Combine all files that should have Footer
+        const allFilesToCheck = [...adminFiles, ...sellerFiles, ...accountFiles, ...pageFiles];
+        let filesWithFooter = 0;
+        let filesWithoutFooter = 0;
+        const missingFooterFiles = [];
+        const correctFooterFiles = [];
+        for (const file of allFilesToCheck) {
+            // Skip API routes and certain system files
+            if (file.relativePath.includes("/api/") ||
+                file.relativePath.includes("/login") ||
+                file.relativePath.includes("/register") ||
+                file.relativePath.includes("/not-found") ||
+                file.relativePath.includes("/loading") ||
+                file.relativePath.includes("/error")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check if file imports Footer
+            const importsFooter = content.includes("import { Footer }") ||
+                (content.includes("import {") && content.includes("Footer"));
+            // Check if file renders Footer component
+            const rendersFooter = content.includes("<Footer />") || content.includes("<Footer>");
+            if (importsFooter && rendersFooter) {
+                filesWithFooter++;
+                correctFooterFiles.push(file.relativePath);
+                info.push(`✓ ${file.relativePath} includes Footer component`);
+            }
+            else if (importsFooter && !rendersFooter) {
+                filesWithoutFooter++;
+                missingFooterFiles.push(file.relativePath);
+                errors.push(`CRITICAL: ${file.relativePath} imports Footer but doesn't render it`);
+                errors.push("  - ISSUE: Footer is imported but not included in JSX");
+                errors.push("  - REQUIRED: Add <Footer /> before closing </PageLayout>");
+            }
+            else if (!importsFooter && !rendersFooter) {
+                // Check if this is a page that should have Footer
+                const isPageThatNeedsFooter = file.relativePath.includes("/admin/") ||
+                    file.relativePath.includes("/store/") ||
+                    file.relativePath.includes("/account/") ||
+                    (file.relativePath.includes("/page.") &&
+                        !file.relativePath.includes("/(auth)/") &&
+                        !file.relativePath.includes("/api/"));
+                if (isPageThatNeedsFooter) {
+                    filesWithoutFooter++;
+                    missingFooterFiles.push(file.relativePath);
+                    errors.push(`CRITICAL: ${file.relativePath} missing Footer component`);
+                    errors.push('  - REQUIRED: Import Footer from "@/components/Footer"');
+                    errors.push("  - REQUIRED: Add <Footer /> before closing </PageLayout>");
+                }
+            }
+        }
+        // Summary
+        info.push(`Files with Footer component: ${filesWithFooter}`);
+        if (filesWithoutFooter > 0) {
+            errors.push(`CRITICAL: ${filesWithoutFooter} files are missing Footer component`);
+            errors.push("");
+            errors.push("FILES MISSING FOOTER:");
+            missingFooterFiles.forEach((file) => errors.push(`  - ${file}`));
+            errors.push("");
+            errors.push("REQUIRED PATTERN:");
+            errors.push('  1. Import: import { Footer } from "@/components/Footer";');
+            errors.push("  2. Render: <Footer /> before closing </PageLayout>");
+            errors.push("  3. ALL admin, seller, and account pages must have Footer");
+            errors.push("");
+            errors.push("REFERENCE: Other admin pages like /admin/users show correct pattern");
+        }
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} FOOTER COMPONENT IS MANDATORY FOR ALL PAGES`);
+            errors.push("Footer provides consistent navigation and branding");
+            errors.push("Users expect Footer on every page for complete user experience");
+            errors.push("NO EXCEPTIONS - Every page must include Footer component");
+        }
+        if (!criticalFailures && filesWithFooter > 0) {
+            info.push(`${console_chars_1.emoji.party} ALL PAGES INCLUDE FOOTER COMPONENT`);
+            info.push("${chars.check} Consistent page structure maintained");
+            info.push("✓ Complete user experience provided");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Footer Spacing Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Footer Spacing Consistency", "CRITICAL: Ensure consistent spacing between last content element and Footer component", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const pageFiles = await scanner.findFiles(/app[\\/].+[\\/]page\.tsx$/);
+        let filesChecked = 0;
+        let filesWithFooter = 0;
+        let filesWithProperSpacing = 0;
+        let criticalFailures = false;
+        for (const file of pageFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            filesChecked++;
+            // Skip if file doesn't use Footer component
+            if (!content.includes("<Footer")) {
+                continue;
+            }
+            filesWithFooter++;
+            // Check for proper bottom padding before Footer
+            // Pattern 1: Main content Box with pb: "var(--spacing-8)"
+            const hasProperBoxSpacing = /sx=\{\{[^}]*pb:\s*"var\(--spacing-8\)"[^}]*\}\}/.test(content);
+            // Pattern 2: PageLayout with pb: "var(--spacing-8)"
+            const hasProperLayoutSpacing = /<PageLayout[^>]*sx=\{\{[^}]*pb:\s*"var\(--spacing-8\)"[^}]*\}\}/.test(content);
+            if (hasProperBoxSpacing || hasProperLayoutSpacing) {
+                filesWithProperSpacing++;
+            }
+            else {
+                // Check if there's any bottom padding at all
+                const hasAnyBottomPadding = /pb:\s*"var\(--spacing-\d+\)"|pb:\s*\d+/.test(content);
+                if (!hasAnyBottomPadding) {
+                    errors.push(`${console_chars_1.emoji.error} CRITICAL: ${file.relativePath}`);
+                    errors.push(`   No bottom padding found before Footer component`);
+                    errors.push(`   ${console_chars_1.emoji.hint} Add pb: "var(--spacing-8)" to the main content Box`);
+                    criticalFailures = true;
+                }
+                else {
+                    warnings.push(`${console_chars_1.emoji.warning}  ${file.relativePath}`);
+                    warnings.push(`   Bottom padding found but not using standard var(--spacing-8)`);
+                    warnings.push(`   ${console_chars_1.emoji.hint} Use pb: "var(--spacing-8)" for consistency`);
+                }
+            }
+        }
+        info.push(`${console_chars_1.emoji.chart} Footer Spacing Statistics:`);
+        info.push(`   Files checked: ${filesChecked}`);
+        info.push(`   Files with Footer: ${filesWithFooter}`);
+        info.push(`   Files with proper spacing: ${filesWithProperSpacing}`);
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} CRITICAL: Footer spacing violations detected`);
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.clipboard} Required Pattern:`);
+            errors.push('   <Box sx={{ px: "var(--spacing-4)", pb: "var(--spacing-8)" }}>');
+            errors.push("     {/* Page content */}");
+            errors.push("   </Box>");
+            errors.push("   <Footer />");
+        }
+        if (!criticalFailures && filesWithFooter > 0) {
+            info.push("");
+            info.push(`${console_chars_1.emoji.success} ALL PAGES HAVE PROPER FOOTER SPACING`);
+            info.push("${chars.check} Consistent spacing maintained across all pages");
+            info.push("✓ Professional appearance with proper gaps");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Header-to-Breadcrumbs Spacing Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Header-to-Breadcrumbs Spacing Consistency", "CRITICAL: Ensure consistent spacing between UnifiedHeader navigation and Breadcrumbs across all pages", async () => {
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        // Find all client components that have both UnifiedHeader and Breadcrumbs
+        const clientFiles = await scanner.findFiles(/Client\.(tsx|ts)$/);
+        let pagesWithCorrectSpacing = 0;
+        let pagesWithIncorrectSpacing = 0;
+        const incorrectPages = [];
+        const correctPages = [];
+        for (const file of clientFiles) {
+            // Skip non-page client files
+            if (file.relativePath.includes("/components/") || file.relativePath.includes("/lib/")) {
+                continue;
+            }
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Check if file has both UnifiedHeader navigation and Breadcrumbs
+            const hasNavigationHeader = content.includes("UnifiedHeader") && content.includes('variant="navigation"');
+            const hasBreadcrumbs = content.includes("<Breadcrumbs");
+            if (!hasNavigationHeader || !hasBreadcrumbs) {
+                continue; // Skip files that don't have both components
+            }
+            // Check for problematic patterns that create extra spacing
+            const problematicPatterns = [
+                // Main content container with py padding after breadcrumbs
+                /px:\s*["']var\(--spacing-4\)["'][^}]*,\s*py:\s*["']var\(--spacing-4\)["']/g,
+                // Explicit vertical padding in main content after breadcrumbs
+                /Breadcrumbs[^}]*\}[^<]*<[^>]*sx=\{[^}]*py:\s*["']var\(--spacing-[1-9]\)["']/g,
+                // Padding top in main content container
+                /px:\s*["']var\(--spacing-4\)["'][^}]*,\s*pt:\s*["']var\(--spacing-[1-9]\)["']/g,
+            ];
+            let hasSpacingIssue = false;
+            for (const pattern of problematicPatterns) {
+                const matches = content.match(pattern);
+                if (matches) {
+                    hasSpacingIssue = true;
+                    pagesWithIncorrectSpacing++;
+                    incorrectPages.push(file.relativePath);
+                    errors.push(`CRITICAL: ${file.relativePath} has extra vertical padding creating inconsistent header-to-breadcrumbs spacing`);
+                    matches.forEach((match) => {
+                        errors.push(`  - VIOLATION: ${match.substring(0, 80)}...`);
+                    });
+                    errors.push("  - REQUIRED: Remove py/pt padding from main content container");
+                    errors.push('  - STANDARD: Only use px: "var(--spacing-4)" for horizontal padding');
+                    break;
+                }
+            }
+            if (!hasSpacingIssue) {
+                pagesWithCorrectSpacing++;
+                correctPages.push(file.relativePath);
+                info.push(`${console_chars_1.chars.check} ${file.relativePath} has correct header-to-breadcrumbs spacing`);
+            }
+        }
+        // Summary
+        info.push(`Pages with correct header-breadcrumbs spacing: ${pagesWithCorrectSpacing}`);
+        if (pagesWithIncorrectSpacing > 0) {
+            errors.push(`CRITICAL: ${pagesWithIncorrectSpacing} pages have inconsistent header-to-breadcrumbs spacing`);
+            errors.push("");
+            errors.push("PAGES WITH INCORRECT SPACING:");
+            incorrectPages.forEach((page) => errors.push(`  - ${page}`));
+            errors.push("");
+            errors.push("REQUIRED PATTERN:");
+            errors.push('  1. UnifiedHeader variant="navigation" (no extra spacing)');
+            errors.push("  2. Breadcrumbs component (py: 1 only)");
+            errors.push('  3. Main content: px: "var(--spacing-4)" ONLY (no py/pt)');
+            errors.push('  4. UnifiedHeader variant="page" provides its own top spacing');
+            errors.push("");
+            errors.push("REFERENCE: /seller/listings has correct spacing pattern");
+        }
+        const criticalFailures = errors.length > 0;
+        if (criticalFailures) {
+            errors.push("");
+            errors.push(`${console_chars_1.emoji.bell} HEADER-TO-BREADCRUMBS SPACING MUST BE CONSISTENT`);
+            errors.push("Extra vertical padding in main content creates visual inconsistency");
+            errors.push("Users expect the same gap between header and breadcrumbs on all pages");
+            errors.push("Only horizontal padding (px) should be used in main content containers");
+        }
+        if (!criticalFailures && pagesWithCorrectSpacing > 0) {
+            info.push(`${console_chars_1.emoji.party} ALL PAGES HAVE CONSISTENT HEADER-TO-BREADCRUMBS SPACING`);
+            info.push("${chars.check} No extra vertical padding in main content containers");
+            info.push("✓ Consistent gap between navigation header and breadcrumbs");
+            info.push("✓ UnifiedHeader page variants provide proper top spacing");
+        }
+        return { passed: !criticalFailures, errors, warnings, info };
+    }));
+    // Unified Badge System Consistency (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Unified Badge System", "CRITICAL: Validate all badge components use the unified system", async () => {
+        console.log(`${console_chars_1.emoji.search} Running Unified Badge System check...`);
+        // Run the specialized badge consistency check
+        const badgeCheckResult = await (0, unified_badge_consistency_1.runUnifiedBadgeConsistencyCheck)();
+        // Extract results from the badge check
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        if (!badgeCheckResult.passed) {
+            errors.push(`${console_chars_1.emoji.bell} UNIFIED BADGE SYSTEM VALIDATION FAILED`);
+            errors.push("All badge components must use UnifiedHeaderBadge system");
+            errors.push("Legacy HeaderBadge and EnhancedHeaderBadge components must be removed");
+            errors.push("Run: pnpm preflight:unified-badge-consistency for details");
+        }
+        else {
+            info.push(`${console_chars_1.emoji.success} UNIFIED BADGE SYSTEM VALIDATION PASSED`);
+            info.push("${chars.check} All badge components use the unified system");
+            info.push("✓ Legacy components properly removed");
+            info.push("✓ Consistent styling across all pages");
+        }
+        return { passed: badgeCheckResult.passed, errors, warnings, info };
+    }));
+    // StatusChip Icon Sizing Consistency
+    runner.addCheck((0, preflight_runner_1.createCheck)("StatusChip Icon Sizing", "Validate icons passed to StatusChip use consistent sizing", async () => {
+        console.log(`${console_chars_1.emoji.search} Running StatusChip Icon Sizing check...`);
+        const errors = [];
+        const warnings = [];
+        const info = [];
+        const componentFiles = await scanner.findComponentFiles();
+        let totalStatusChipWithIcons = 0;
+        let unsizedIcons = 0;
+        const filesWithUnsizedIcons = [];
+        // Pattern to find StatusChip with icon prop
+        const statusChipIconPattern = /<StatusChip[^>]*icon=\{<(\w+)([^}]*)\}/g;
+        // Pattern to check if icon has size prop
+        const iconWithSizePattern = /size=\{?\d+\}?/;
+        for (const file of componentFiles) {
+            const content = await scanner.readFileContent(file.path);
+            if (!content)
+                continue;
+            // Find all StatusChip usages with icons
+            const matches = [...content.matchAll(statusChipIconPattern)];
+            for (const match of matches) {
+                totalStatusChipWithIcons++;
+                const iconProps = match[2] || "";
+                // Check if icon has explicit size
+                if (!iconWithSizePattern.test(iconProps)) {
+                    unsizedIcons++;
+                    if (!filesWithUnsizedIcons.includes(file.relativePath)) {
+                        filesWithUnsizedIcons.push(file.relativePath);
+                    }
+                    warnings.push(`${file.relativePath}: StatusChip icon without explicit size (auto-sized by component)`);
+                }
+            }
+        }
+        // Summary
+        info.push(`StatusChip usages with icons: ${totalStatusChipWithIcons}`);
+        if (unsizedIcons > 0) {
+            info.push(`Icons without explicit size: ${unsizedIcons} (auto-sized by StatusChip)`);
+            info.push("Note: StatusChip now auto-sizes icons, but explicit sizing is recommended for clarity");
+            info.push("Recommended pattern: icon={<IconName size={14} />} for sm chips");
+        }
+        else if (totalStatusChipWithIcons > 0) {
+            info.push(`${console_chars_1.emoji.success} All StatusChip icons have explicit sizing`);
+        }
+        // This is a warning-only check, not blocking
+        return { passed: true, errors, warnings, info };
+    }));
+    // Hydration Mismatch Prevention (CRITICAL)
+    runner.addCheck((0, preflight_runner_1.createCheck)("Hydration Mismatch Prevention", "CRITICAL: Detect potential hydration mismatches before they cause runtime errors", async () => {
+        console.log(`${console_chars_1.emoji.search} Running Hydration Mismatch Prevention check...`);
+        try {
+            const { HydrationMismatchChecker } = await Promise.resolve().then(() => __importStar(require("./hydration-mismatch-check.js")));
+            const checker = new HydrationMismatchChecker();
+            // Run the hydration check and capture results
+            let checkPassed = true;
+            let capturedOutput = [];
+            // Override console methods to capture output
+            const originalLog = console.log;
+            const originalError = console.error;
+            const originalExit = process.exit;
+            // Prevent actual process exit during preflight
+            process.exit = ((code) => {
+                checkPassed = code === 0;
+                throw new Error(`HydrationCheckExit:${code}`);
+            });
+            // Capture console output
+            console.log = (...args) => {
+                capturedOutput.push(args.join(" "));
+            };
+            console.error = (...args) => {
+                capturedOutput.push(`ERROR: ${args.join(" ")}`);
+            };
+            try {
+                await checker.run();
+            }
+            catch (error) {
+                // Check if this is our controlled exit
+                if (error.message.includes("HydrationCheckExit:")) {
+                    const exitCode = parseInt(error.message.split(":")[1]);
+                    checkPassed = exitCode === 0;
+                }
+                else {
+                    throw error;
+                }
+            }
+            finally {
+                // Restore original methods
+                console.log = originalLog;
+                console.error = originalError;
+                process.exit = originalExit;
+            }
+            // Process captured output
+            const errors = [];
+            const warnings = [];
+            const info = [];
+            for (const line of capturedOutput) {
+                if (line.includes(`${console_chars_1.emoji.bell}`) ||
+                    line.includes("CRITICAL") ||
+                    line.includes("ERROR:")) {
+                    errors.push(line.replace("ERROR: ", ""));
+                }
+                else if (line.includes(`${console_chars_1.emoji.warning}`) || line.includes("WARNING")) {
+                    warnings.push(line);
+                }
+                else if (line.includes(`${console_chars_1.emoji.success}`) ||
+                    line.includes("${chars.check}") ||
+                    line.includes("INFO")) {
+                    info.push(line);
+                }
+            }
+            // Add summary information
+            if (checkPassed && errors.length === 0) {
+                info.push(`${console_chars_1.emoji.success} HYDRATION MISMATCH PREVENTION PASSED`);
+                info.push("${chars.check} No critical hydration mismatch patterns detected");
+                info.push("✓ Client-side APIs are properly guarded");
+                info.push("✓ Date/time operations are consistent");
+                info.push("✓ No non-deterministic functions in render");
+            }
+            else {
+                errors.push(`${console_chars_1.emoji.bell} HYDRATION MISMATCH PREVENTION FAILED`);
+                errors.push("Critical hydration issues detected that WILL cause runtime errors");
+                errors.push("These patterns MUST be fixed before deployment:");
+                errors.push('  ${chars.bullet} Wrap client-side APIs in typeof window !== "undefined" checks');
+                errors.push("  • Move dynamic operations to useEffect hooks");
+                errors.push("  • Use consistent date/number formatting");
+                errors.push("  • Ensure initial state matches between server and client");
+            }
+            return {
+                passed: checkPassed && errors.length === 0,
+                errors,
+                warnings,
+                info,
+            };
+        }
+        catch (error) {
+            return {
+                passed: false,
+                errors: [`Failed to run hydration mismatch check: ${error}`],
+                warnings: [],
+                info: [],
+            };
+        }
+    }));
+    const result = await runner.runAll();
+    if (!result.passed) {
+        console.log(`\n${console_chars_1.emoji.bell} UI Quality preflight checks failed!`);
+        process.exit(1);
+    }
+    console.log(`\n${console_chars_1.emoji.palette} All UI Quality preflight checks passed!`);
+    return result;
+}
+// Run if called directly
+if (require.main === module) {
+    runUIQualityPreflights().catch(console.error);
+}
+exports.default = runUIQualityPreflights;
+//# sourceMappingURL=ui-quality.js.map