@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-components.js

@@ -0,0 +1,2008 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Consolidated UI Components Preflight
+ *
+ * Combines component checks into one comprehensive module:
+ * - button-variant-consistency (button patterns, MUI → new variants)
+ * - badge-overflow-validation (badge positioning)
+ * - icon-size-consistency (icon sizing)
+ * - border-radius-consistency (border radius tokens)
+ * - shadow-consistency (shadow tokens)
+ * - chip-consistency (chip height & patterns)
+ * - platform-icons (duplicate platform icon definitions)
+ * - numeric-spacing (hardcoded spacing values)
+ * - hardcoded-colors (internal colors should use tokens)
+ * - card-outline-consistency (cards should use shadows, not borders)
+ * - metric-grid-glass-variant (MetricGrid glass variant has unreliable borders) - BLOCKING
+ * - chained-css-variables (CSS variables that chain may not resolve) - BLOCKING
+ * - duplicate-classname-props (multiple className props overwrite each other) - BLOCKING
+ * - deprecated-system-components (ButtonSystem, FlexSystem, CardSystem, GridSystem, FeedbackSystem)
+ * - custom-stat-displays (Avatar + Typography patterns should use StatCardGrid)
+ *
+ * All issues are warnings (non-blocking) to allow gradual migration.
+ *
+ * Usage:
+ *   pnpm preflight:ui-components              # All component checks
+ *   pnpm preflight:ui-components buttons      # Button patterns only
+ *   pnpm preflight:ui-components badges       # Badge overflow only
+ *   pnpm preflight:ui-components icons        # Icon sizes only
+ *   pnpm preflight:ui-components radius       # Border radius only
+ *   pnpm preflight:ui-components shadows      # Shadows only
+ *   pnpm preflight:ui-components chips        # Chip consistency only
+ *   pnpm preflight:ui-components platforms    # Platform icons only
+ *   pnpm preflight:ui-components spacing      # Numeric spacing only
+ *   pnpm preflight:ui-components colors       # Hardcoded colors only
+ *   pnpm preflight:ui-components cards        # Card outline consistency only
+ *   pnpm preflight:ui-components metric-grid  # MetricGrid glass variant check
+ *   pnpm preflight:ui-components css-variables # Chained CSS variable check
+ *   pnpm preflight:ui-components classname    # Duplicate className props check
+ *   pnpm preflight:ui-components deprecated   # Deprecated System components only
+ *   pnpm preflight:ui-components stat-displays # Custom stat display detection
+ */
+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 });
+exports.UIComponentsPreflightModule = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const file_cache_1 = require("../../shared/file-cache");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const exclusions_1 = require("../../shared/exclusions");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+// Check metadata
+const id = "consolidated/ui-components";
+// Essential defaults (node_modules, __mocks__, .next, dist, coverage)
+const EXCLUDED = (0, glob_patterns_1.extendExcludes)(glob_patterns_1.STANDARD_EXCLUDES_WITH_TESTS, ["**/packages/ui/**"]);
+// App-level exclusions loaded from config
+let appExclusions = [];
+// Platform brand colors (OK to hardcode - external brands)
+const PLATFORM_BRAND_COLORS = [
+    "#E53238", // eBay
+    "#232F3E",
+    "#FF9900", // Amazon
+    "#FFC220",
+    "#0071CE", // Walmart
+    "#F16521", // Etsy
+    "#1A1A1A",
+    "#FF6B35", // Whatnot
+    "#00F2EA",
+    "#FE2C55", // TikTok
+    "#7AB55C", // Shopify
+    "#96588A", // WooCommerce
+    "#6772E5", // Shippo
+    "#3B5998", // ShipStation
+].map((c) => c.toLowerCase());
+// CACHED FILE LISTS - Scan once, use everywhere
+let _cachedAppComponentsTsxFiles = null;
+async function getAppComponentsTsxFiles() {
+    if (!_cachedAppComponentsTsxFiles) {
+        _cachedAppComponentsTsxFiles = await file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    return _cachedAppComponentsTsxFiles;
+}
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIComponentsPreflightModule {
+    verbose;
+    parallel = false;
+    strictUniformity;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+        this.strictUniformity = process.env.PREFLIGHT_STRICT_UNIFORMITY === "1";
+    }
+    getLineNumberFromIndex(content, index) {
+        return content.slice(0, index).split("\n").length;
+    }
+    isLikelyInteractive(tag) {
+        return (/\bonClick=/.test(tag) ||
+            /\bonKeyDown=/.test(tag) ||
+            /\bonKeyUp=/.test(tag) ||
+            /\brole=\{?['"]button['"]\}?/.test(tag) ||
+            /\btabIndex=\{?0\}?/.test(tag));
+    }
+    async getComponentFiles() {
+        const files = await file_cache_1.fileCache.getComponentsTsxJsxFiles();
+        return files.filter((file) => !(0, exclusions_1.shouldExcludeFile)(file, appExclusions));
+    }
+    async getAllFiles() {
+        const files = await file_cache_1.fileCache.getAppAndComponentsTSX();
+        return files.filter((file) => !(0, exclusions_1.shouldExcludeFile)(file, appExclusions));
+    }
+    /**
+     * UnifiedDialog padding guardrail
+     * Ensures the shared UnifiedDialog enforces internal padding so dialog content
+     * can't regress to flush-to-border when underlying dialog primitives change.
+     */
+    async checkUnifiedDialogPadding() {
+        const startTime = Date.now();
+        const issues = [];
+        const file = "components/shared/unified-dialog/UnifiedDialog.tsx";
+        try {
+            const content = fs.readFileSync(file, "utf8");
+            const titleHasPadding = /<DialogTitle[^>]*\bclassName\s*=\s*"[^"]*\bp-\d+[^"]*"/m.test(content);
+            const contentHasPadding = /<DialogContent[^>]*\bclassName\s*=\s*"[^"]*\bp-\d+[^"]*"/m.test(content);
+            if (!titleHasPadding || !contentHasPadding) {
+                issues.push({
+                    file,
+                    line: 1,
+                    type: "unified-dialog-padding",
+                    severity: "warning",
+                    message: "UnifiedDialog should enforce internal padding on DialogTitle and DialogContent to prevent flush-to-border dialogs.",
+                    suggestion: "Add a padding className (e.g., p-6) to <DialogTitle> and <DialogContent> in UnifiedDialog.",
+                });
+            }
+        }
+        catch {
+            issues.push({
+                file,
+                line: 1,
+                type: "unified-dialog-padding",
+                severity: "warning",
+                message: "Could not read UnifiedDialog implementation to validate padding guardrail.",
+            });
+        }
+        return {
+            name: "UnifiedDialog padding guardrail",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Button Variant Consistency
+     * Detects MUI-style variants that should use new button system
+     */
+    async checkButtons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Normalize path separators for cross-platform compatibility
+            const normalizedFile = file.replace(/\\/g, "/");
+            const isUploadSurface = normalizedFile.includes("components/upload/") ||
+                normalizedFile.includes("components/shared/file/");
+            // components/ui contains the implementation of the design system primitives
+            // (it is expected to use native elements internally).
+            const isUIPrimitive = normalizedFile.includes("components/ui/");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // MUI variant="contained" → variant="default"
+                if (/variant=["']contained["']/i.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "mui-contained-variant",
+                        severity: "warning",
+                        message: 'MUI variant="contained" should be variant="default"',
+                        suggestion: 'Change to variant="default" for consistency',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // MUI variant="outlined" → variant="outline"
+                if (/variant=["']outlined["']/i.test(line) && /<Button/i.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "mui-outlined-variant",
+                        severity: "warning",
+                        message: 'MUI variant="outlined" should be variant="outline"',
+                        suggestion: 'Change to variant="outline" for consistency',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Native button usage (upload surfaces should use shared UI components)
+                if (isUploadSurface && /<button\b/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "native-button-upload-surface",
+                        severity: "warning",
+                        message: "Native <button> used in upload UI",
+                        suggestion: "Use <Button> or <IconButton> from @/components/ui for consistent spacing/typography",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Native button usage (global): encourage consistent use of design-system buttons everywhere.
+                // Keep this warning out of the primitives folder to avoid noise.
+                if (!isUIPrimitive && !isUploadSurface && /<button\b/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "native-button-global",
+                        severity: "warning",
+                        message: "Native <button> used outside the UI system",
+                        suggestion: "Prefer <Button> / <IconButton> from @/components/ui to keep spacing and typography uniform",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Native button with inline styles
+                if (/<button[^>]*style=/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "native-button-styles",
+                        severity: "warning",
+                        message: "Native <button> with inline styles",
+                        suggestion: "Use <Button> from @/components/ui",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Button with bg className
+                if (/<Button[^>]*className=["'][^"']*bg-/i.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "button-bg-class",
+                        severity: "warning",
+                        message: "Button using className for background",
+                        suggestion: "Use variant prop instead",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for Button asChild with Link that might have centering issues
+                // The Button component should handle this, but warn if custom styles override
+                if (/<Button[^>]*asChild/.test(line)) {
+                    const context = lines.slice(index, Math.min(lines.length, index + 5)).join("\n");
+                    // Check if Link has styles that might break centering
+                    if (context.includes("style=") && context.includes("<Link")) {
+                        // Look for height or display overrides that could affect centering
+                        if (/style=\{[^}]*(height|display|alignItems|justifyContent)/.test(context)) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "button-asChild-style-override",
+                                severity: "info",
+                                message: "Button asChild with style overrides on Link",
+                                suggestion: "Ensure Link styles don't break text centering (height, display, alignItems, justifyContent)",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Button Variant Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Link Styled As Button
+     * Detects <Link>/<a> elements that are visually styled like buttons.
+     * Prefer <Button asChild> for consistent spacing/typography.
+     */
+    async checkLinkButtons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            // UI primitives may legitimately render anchors/buttons internally
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (normalizedFile.includes("components/ui/"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Match opening tags for Link or a (can span multiple lines)
+            const tagMatches = content.matchAll(/<(Link|a)\b[\s\S]*?>/g);
+            for (const match of tagMatches) {
+                const fullTag = match[0];
+                const startIndex = match.index ?? 0;
+                // Ignore if already wrapped via Button asChild in the same opening tag context
+                // (Not perfect, but avoids common false positives)
+                if (fullTag.includes("asChild") && fullTag.includes("<Button"))
+                    continue;
+                const hasClassName = /className=\{?["']/.test(fullTag);
+                const hasStyle = /\bstyle=\{/.test(fullTag);
+                if (!hasClassName && !hasStyle)
+                    continue;
+                // Skip accessibility skip-links (sr-only pattern)
+                if (/sr-only/.test(fullTag))
+                    continue;
+                // Skip navigation card/tile patterns (flex-col with items-center = card layout, not button)
+                // These are semantically links for navigation, not action buttons
+                if (/flex-col/.test(fullTag) && /items-center/.test(fullTag))
+                    continue;
+                // Skip grid-based category/navigation tiles
+                if (/grid/.test(fullTag) || /text-center/.test(fullTag))
+                    continue;
+                // Heuristic: if it has padding + button-like affordances, it's likely a button.
+                // (We keep this intentionally conservative to avoid noise.)
+                const looksLikeButton = /\b(px|py|p)-\d+\b/.test(fullTag) &&
+                    (/(bg-|border|rounded|shadow|hover:|focus:|inline-flex|items-center|justify-center)/.test(fullTag) ||
+                        /\bvariant=\{?['"](?:default|outline|ghost|text)['"]\}?/.test(fullTag));
+                if (!looksLikeButton)
+                    continue;
+                issues.push({
+                    file,
+                    line: this.getLineNumberFromIndex(content, startIndex),
+                    type: "link-styled-as-button",
+                    severity: "warning",
+                    message: "<Link>/<a> styled like a button",
+                    suggestion: "Wrap the Link with <Button asChild> from @/components/ui for uniform button spacing/typography",
+                    snippet: fullTag.replace(/\s+/g, " ").trim().substring(0, 120),
+                });
+            }
+        }
+        return {
+            name: "Link Styled As Button",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Clickable Non-Button Elements
+     * Detects <div>/<span> used as interactive controls.
+     * Prefer <Button>/<IconButton> for consistent spacing/typography and a11y.
+     */
+    async checkClickableNonButtons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            // Normalize path separators for cross-platform compatibility
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (normalizedFile.includes("components/ui/"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Match opening tags for div/span (can span multiple lines)
+            const tagMatches = content.matchAll(/<(div|span)\b[\s\S]*?>/g);
+            for (const match of tagMatches) {
+                const tag = match[0];
+                const startIndex = match.index ?? 0;
+                if (!this.isLikelyInteractive(tag))
+                    continue;
+                // Skip clearly non-control patterns
+                if (/\brole=\{?['"]presentation['"]\}?/.test(tag))
+                    continue;
+                if (/\baria-hidden=\{?['"]true['"]\}?/.test(tag))
+                    continue;
+                // Heuristic: treat as "button-like" if it advertises interactivity
+                const hasPointerCue = /cursor-pointer/.test(tag);
+                const hasButtonRole = /\brole=\{?['"]button['"]\}?/.test(tag);
+                if (!hasPointerCue && !hasButtonRole)
+                    continue;
+                issues.push({
+                    file,
+                    line: this.getLineNumberFromIndex(content, startIndex),
+                    type: "clickable-non-button",
+                    severity: "warning",
+                    message: "Clickable <div>/<span> used as a control",
+                    suggestion: "Use <Button> / <IconButton> from @/components/ui (or <Button asChild>) for uniform behavior and accessibility",
+                    snippet: tag.replace(/\s+/g, " ").trim().substring(0, 120),
+                });
+            }
+        }
+        return {
+            name: "Clickable Non-Buttons",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * IconButton Accessibility
+     * Ensures IconButton has an accessible label (label / aria-label / title).
+     */
+    async checkIconButtonAccessibility() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            // UI primitives define IconButton itself
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (normalizedFile.includes("components/ui/"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Find all IconButton opening tags - need to handle JSX expressions inside props
+            // which may contain > characters (e.g., icon={<Trash2 size={16} />})
+            const iconButtonStarts = [...content.matchAll(/<IconButton\b/g)];
+            for (const startMatch of iconButtonStarts) {
+                const startIndex = startMatch.index ?? 0;
+                // Find the closing > of this tag, accounting for nested JSX in props
+                let depth = 0;
+                let inString = false;
+                let stringChar = "";
+                let tagEnd = startIndex;
+                for (let i = startIndex; i < content.length; i++) {
+                    const char = content[i];
+                    const prevChar = i > 0 ? content[i - 1] : "";
+                    // Track string boundaries
+                    if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+                        if (!inString) {
+                            inString = true;
+                            stringChar = char;
+                        }
+                        else if (char === stringChar) {
+                            inString = false;
+                        }
+                        continue;
+                    }
+                    if (inString)
+                        continue;
+                    // Track JSX expression depth
+                    if (char === "{") {
+                        depth++;
+                    }
+                    else if (char === "}") {
+                        depth--;
+                    }
+                    else if (char === ">" && depth === 0) {
+                        tagEnd = i + 1;
+                        break;
+                    }
+                }
+                const tag = content.slice(startIndex, tagEnd);
+                // Check for accessibility props
+                const hasLabel = /\blabel=/.test(tag);
+                const hasAria = /\baria-label=/.test(tag);
+                const hasTitle = /\btitle=/.test(tag);
+                if (hasLabel || hasAria || hasTitle)
+                    continue;
+                issues.push({
+                    file,
+                    line: this.getLineNumberFromIndex(content, startIndex),
+                    type: "iconbutton-missing-label",
+                    severity: "warning",
+                    message: "IconButton missing accessibility label",
+                    suggestion: 'Add label="..." (preferred) or aria-label="..."',
+                    snippet: tag.replace(/\s+/g, " ").trim().substring(0, 120),
+                });
+            }
+        }
+        return {
+            name: "IconButton Accessibility",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Badge Overflow Validation
+     */
+    async checkBadges() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Badge with negative top position
+                if (/<(Chip|Badge|div)[^>]*position:\s*["']absolute["'][^>]*top:\s*-\d+/i.test(line)) {
+                    const context = lines
+                        .slice(Math.max(0, index - 10), Math.min(lines.length, index + 10))
+                        .join("\n");
+                    if (!context.includes('overflow: "visible"') &&
+                        !context.includes("overflow: 'visible'")) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "badge-overflow",
+                            severity: "warning",
+                            message: "Badge with negative top without overflow: visible",
+                            suggestion: 'Add overflow: "visible" to parent',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Badge Overflow Validation",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Icon Size Consistency
+     */
+    async checkIcons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Hardcoded icon size (non-standard)
+                const sizeMatch = line.match(/size=\{?(\d+)\}?/);
+                if (sizeMatch && (line.includes("lucide-react") || line.includes("Icon"))) {
+                    const size = parseInt(sizeMatch[1]);
+                    if (![16, 20, 24, 32].includes(size)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-icon-size",
+                            severity: "info",
+                            message: `Non-standard icon size: ${size}`,
+                            suggestion: "Use 16, 20, 24, or 32",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Icon Size Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Border Radius Consistency
+     */
+    async checkBorderRadius() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Hardcoded border-radius (numeric)
+                if (/borderRadius:\s*(\d+)\s*[,}]/i.test(line) && !line.includes("var(--radius-")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-radius-numeric",
+                        severity: "warning",
+                        message: "Hardcoded numeric border-radius",
+                        suggestion: "Use var(--radius-sm|md|lg|xl)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Hardcoded border-radius with px/rem
+                if (/borderRadius:\s*['"]?(\d+px|\d+rem)['"]?/i.test(line) &&
+                    !line.includes("var(--radius-")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-radius",
+                        severity: "warning",
+                        message: "Hardcoded border-radius",
+                        suggestion: "Use var(--radius-sm|md|lg|xl)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Tailwind rounded classes
+                const rounded = line.match(/\brounded-(sm|md|lg|xl|2xl|full)\b/);
+                if (rounded) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "tailwind-rounded",
+                        severity: "info",
+                        message: `Tailwind ${rounded[0]} class`,
+                        suggestion: `Use style={{ borderRadius: "var(--radius-${rounded[1]})" }}`,
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Border Radius Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Shadow Consistency
+     */
+    async checkShadows() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getAllFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Hardcoded box-shadow
+                const shadowMatch = line.match(/boxShadow:\s*['"]([^'"]+)['"]?/i);
+                if (shadowMatch &&
+                    !line.includes("var(--shadow-") &&
+                    !line.includes("var(--glass-shadow)")) {
+                    const value = shadowMatch[1];
+                    if (value !== "none" && value !== "inherit") {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-shadow",
+                            severity: "warning",
+                            message: "Hardcoded box-shadow",
+                            suggestion: "Use var(--shadow-sm|md|lg|xl)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Tailwind shadow classes - but exclude hover: patterns (those are valid CSS interactions)
+                // Also exclude if already using shadow-[var(--shadow-xl)] syntax (correct pattern)
+                // Also exclude if inside var(--shadow-*) token usage
+                const tailwindShadow = line.match(/(?<!hover:)(?<!focus:)(?<!active:)(?<!var\(--)\bshadow-(sm|md|lg|xl|2xl)\b/);
+                if (tailwindShadow &&
+                    !line.includes("shadow-[var(--shadow-") &&
+                    !line.includes("var(--shadow-")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "tailwind-shadow",
+                        severity: "warning",
+                        message: `Tailwind ${tailwindShadow[0]} class`,
+                        suggestion: `Use style={{ boxShadow: "var(--shadow-${tailwindShadow[1]})" }}`,
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Shadow Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Chip Height Consistency
+     * Ensures all chips use consistent heights via StatusChip or proper size props
+     */
+    async checkChips() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await getAppComponentsTsxFiles();
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check if file uses StatusChip (preferred for status indicators)
+            const usesStatusChip = content.includes("StatusChip") || content.includes("CategoryChip");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check for Chip with custom height overrides
+                if (/<Chip[^>]*sx=\{[^}]*height:/i.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "chip-custom-height",
+                        severity: "info",
+                        message: "Chip with custom height override",
+                        suggestion: 'Use size="sm" (20px) or size="md" (24px), or use StatusChip for status indicators',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for status-like Chip that should use StatusChip
+                if (/<Chip[^>]*label=["'](Active|Inactive|Pending|Available|Coming Soon|Connected|Beta|Draft|Published)/i.test(line) &&
+                    !usesStatusChip) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "chip-status-pattern",
+                        severity: "info",
+                        message: "Status indicator using Chip instead of StatusChip",
+                        suggestion: 'Use <StatusChip status="active" /> for consistent status indicators',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for Chip without explicit size prop (inconsistent sizing)
+                if (/<Chip[^>]*label=/i.test(line) &&
+                    !/<Chip[^>]*size=/i.test(line) &&
+                    !line.includes("StatusChip")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "chip-no-size",
+                        severity: "info",
+                        message: "Chip without explicit size prop",
+                        suggestion: 'Add size="sm" or size="md" for consistent sizing',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Chip Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Platform Icons Consistency
+     * Detects duplicate platform icon definitions that should use PlatformIcon component
+     */
+    async checkPlatformIcons() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await getAppComponentsTsxFiles();
+        // Platform brand colors that indicate inline platform icons
+        const platformPatterns = [
+            { pattern: /#E53238/i, platform: "eBay" },
+            { pattern: /#232F3E.*#FF9900|#FF9900.*#232F3E/i, platform: "Amazon" },
+            { pattern: /#FFC220.*#0071CE|#0071CE.*#FFC220/i, platform: "Walmart" },
+            { pattern: /#F16521/i, platform: "Etsy" },
+            { pattern: /#1A1A1A.*#FF6B35|#FF6B35.*#1A1A1A/i, platform: "Whatnot" },
+            { pattern: /#00F2EA|#FE2C55/i, platform: "TikTok" },
+            { pattern: /#7AB55C/i, platform: "Shopify" },
+            { pattern: /#96588A/i, platform: "WooCommerce" },
+        ];
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            // Skip if file imports PlatformIcon
+            if (content.includes("PlatformIcon"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check for inline platform icon patterns
+                for (const { pattern, platform } of platformPatterns) {
+                    if (pattern.test(line) &&
+                        (line.includes("Avatar") || line.includes("bgcolor") || line.includes("Box"))) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "inline-platform-icon",
+                            severity: "info",
+                            message: `Inline ${platform} icon definition`,
+                            suggestion: `Use <PlatformIcon platform="${platform.toLowerCase()}" /> for consistency`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                        break; // Only report once per line
+                    }
+                }
+            });
+        }
+        return {
+            name: "Platform Icons",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Numeric Spacing Consistency
+     * Detects hardcoded numeric spacing values that should use design tokens
+     */
+    async checkNumericSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await getAppComponentsTsxFiles();
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                if (line.includes("var(--spacing"))
+                    return; // Already using tokens
+                // Check for numeric margin/padding values > 0.5 (allow 0, 0.5 for small adjustments)
+                const spacingMatch = line.match(/\b(m[btlrxy]?|p[btlrxy]?):\s*(\d+\.?\d*)\b/);
+                if (spacingMatch) {
+                    const value = parseFloat(spacingMatch[2]);
+                    if (value > 0.5) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "numeric-spacing",
+                            severity: "info",
+                            message: `Numeric spacing value: ${spacingMatch[1]}: ${value}`,
+                            suggestion: `Use ${spacingMatch[1]}: "var(--spacing-${Math.round(value * 2)})" for consistency`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for gap values
+                const gapMatch = line.match(/\bgap:\s*(\d+\.?\d*)\b/);
+                if (gapMatch) {
+                    const value = parseFloat(gapMatch[1]);
+                    if (value > 0.5) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "numeric-gap",
+                            severity: "info",
+                            message: `Numeric gap value: ${value}`,
+                            suggestion: `Use gap: "var(--spacing-${Math.round(value * 2)})" for consistency`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Numeric Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Card Outline Consistency
+     * Detects cards/containers using borders instead of shadows for elevation
+     */
+    async checkCardOutlines() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        // Patterns that indicate a card-like element with a border (problematic)
+        const borderPatterns = [
+            // Box with border: "1px solid" and borderRadius
+            /border:\s*["']1px solid["']/i,
+        ];
+        // Elements where borders are appropriate (not cards)
+        const excludePatterns = [
+            /variant=["']outlined["']/i,
+            /dashed/i, // Upload zones
+            /<TextField/i,
+            /<Select/i,
+            /<Input/i,
+            /<Checkbox/i,
+            /<Radio/i,
+            /Divider/i,
+            /borderTop:/i, // Single-side borders are OK (dividers)
+            /borderBottom:/i,
+            /borderLeft:/i,
+            /borderRight:/i,
+        ];
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check if line has border pattern
+                const hasBorder = borderPatterns.some((p) => p.test(line));
+                if (!hasBorder)
+                    return;
+                // Skip if it's an excluded element type
+                const isExcluded = excludePatterns.some((p) => p.test(line));
+                if (isExcluded)
+                    return;
+                // Check surrounding context for card-like indicators
+                const contextStart = Math.max(0, index - 5);
+                const contextEnd = Math.min(lines.length, index + 5);
+                const context = lines.slice(contextStart, contextEnd).join("\n");
+                // Only flag if it has significant padding (card-like) and borderRadius
+                const hasSignificantPadding = /p:\s*["']var\(--spacing-[4-9]\)|padding.*var\(--spacing-[4-9]\)/i.test(context);
+                const hasBorderRadius = /borderRadius/i.test(context);
+                if (hasSignificantPadding && hasBorderRadius) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "card-border-instead-of-shadow",
+                        severity: "warning",
+                        message: "Card-like element using border instead of shadow",
+                        suggestion: "Use boxShadow for card elevation instead of border for visual consistency",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Card Outline Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Card Background Check
+     * Detects Card components using glass/transparent backgrounds instead of solid backgrounds.
+     * Cards should have a solid background (var(--bg-primary) or white) for proper visual hierarchy.
+     *
+     * ${emoji.error} BAD: background: "var(--glass-bg-medium)" - transparent, hard to see
+     * ${emoji.success} GOOD: background: "var(--bg-primary)" - solid white/dark background
+     *
+     * NOTE: Some glass backgrounds are intentional for design (login forms, loading skeletons, etc.)
+     */
+    async checkCardBackground() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        // Patterns that indicate transparent/glass backgrounds on cards
+        const glassBackgroundPatterns = [
+            /background:\s*["']var\(--glass-bg/i,
+            /backgroundColor:\s*["']var\(--glass-bg/i,
+            /background:\s*["']rgba\([^)]+,\s*0\.[0-3]\)/i, // rgba with very low opacity (0.0-0.3)
+        ];
+        // Files/patterns where glass backgrounds are intentional
+        const excludePatterns = [
+            /Modal|Dialog|Drawer/i, // Modals can use glass
+            /Overlay/i,
+            /Tooltip/i,
+            /Popover/i,
+            /Header|Nav|Sidebar/i, // Navigation elements
+            /backdrop/i,
+            /Login|Auth|Register/i, // Auth pages often use glass for design
+            /Loading|Skeleton/i, // Loading states
+            /Filter|Search/i, // Filter panels
+            /Hero|Landing/i, // Landing page sections
+            /Faq|Help/i, // Help pages with gradient CTAs
+        ];
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Skip files that are intentionally using glass effects
+            const fileName = file.split(/[/\\]/).pop() || "";
+            if (excludePatterns.some((p) => p.test(fileName)))
+                continue;
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check if line has glass background pattern
+                const hasGlassBackground = glassBackgroundPatterns.some((p) => p.test(line));
+                if (!hasGlassBackground)
+                    return;
+                // Check surrounding context for Card component
+                const contextStart = Math.max(0, index - 10);
+                const contextEnd = Math.min(lines.length, index + 3);
+                const context = lines.slice(contextStart, contextEnd).join("\n");
+                // Only flag if it's inside a Card component (not just any Box with glass)
+                const isInsideCard = /<Card[^>]*>/.test(context) &&
+                    !/<\/Card>/.test(lines.slice(contextStart, index).join("\n"));
+                // Also check for card-like patterns (MetricCard, StatCard, etc.)
+                const isCardComponent = /Card[^>]*style=\{/.test(context) || /function\s+\w*Card/.test(context);
+                // Skip if this is just an icon container or small decorative element
+                const isIconContainer = /padding:\s*["']var\(--spacing-[23]\)["']/.test(context) &&
+                    /Icon|size=\{?\d+\}?|lucide-react/.test(context);
+                const isSmallElement = /width:\s*\d+px|height:\s*\d+px/.test(context) &&
+                    parseInt((context.match(/(?:width|height):\s*(\d+)px/) || [])[1] || "100") < 80;
+                const isInlineIconBox = /display:\s*["']inline-flex["']/.test(context) &&
+                    /borderRadius:\s*["']var\(--radius-full\)["']/.test(context);
+                if ((isInsideCard || isCardComponent) &&
+                    !isIconContainer &&
+                    !isSmallElement &&
+                    !isInlineIconBox) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "card-glass-background",
+                        severity: "warning",
+                        message: "Card using glass/transparent background instead of solid background",
+                        suggestion: 'Use background: "var(--bg-primary)" for solid card backgrounds',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Card Background Check",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Card Missing Background Check
+     * Detects Card components that don't have a proper solid background.
+     * Cards should always have a visible background for proper visual hierarchy.
+     *
+     * This check catches:
+     * - Cards with transparent/none background
+     * - Cards with only border but no background
+     * - Card-like containers (product cards, item cards) missing backgrounds
+     *
+     * ${emoji.error} BAD: <Card style={{ background: "transparent" }}>
+     * ${emoji.error} BAD: <Card className="bg-transparent">
+     * ${emoji.success} GOOD: <Card> (uses default bg-[var(--bg-primary)])
+     * ${emoji.success} GOOD: <Card className="bg-secondary">
+     */
+    async checkCardMissingBackground() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        // Patterns that indicate missing/transparent backgrounds
+        const missingBackgroundPatterns = [
+            /background:\s*["'](?:transparent|none)["']/i,
+            /backgroundColor:\s*["'](?:transparent|none)["']/i,
+            /\bbg-transparent\b/,
+            /\bbg-none\b/,
+        ];
+        // Files/patterns where transparent cards might be intentional
+        const excludePatterns = [
+            /Modal|Dialog|Drawer/i,
+            /Overlay/i,
+            /Tooltip/i,
+            /Popover/i,
+            /Skeleton/i,
+            /Ghost/i, // Ghost buttons/cards
+            /Placeholder/i,
+        ];
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Skip files that are intentionally using transparent effects
+            const fileName = file.split(/[/\\]/).pop() || "";
+            if (excludePatterns.some((p) => p.test(fileName)))
+                continue;
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check if line has transparent background pattern
+                const hasMissingBackground = missingBackgroundPatterns.some((p) => p.test(line));
+                if (!hasMissingBackground)
+                    return;
+                // Check surrounding context for Card component
+                const contextStart = Math.max(0, index - 10);
+                const contextEnd = Math.min(lines.length, index + 3);
+                const context = lines.slice(contextStart, contextEnd).join("\n");
+                // Only flag if it's inside a Card component
+                const isInsideCard = /<Card[^>]*>/.test(context) &&
+                    !/<\/Card>/.test(lines.slice(contextStart, index).join("\n"));
+                const isCardComponent = /Card[^>]*(?:style=\{|className=)/.test(context) || /function\s+\w*Card/.test(context);
+                // Also check for card-like patterns in class names
+                const isCardLikeElement = /similar-item-card|product-card|listing-card|item-card/i.test(context);
+                if (isInsideCard || isCardComponent || isCardLikeElement) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "card-missing-background",
+                        severity: "warning",
+                        message: "Card using transparent/none background - cards should have solid backgrounds",
+                        suggestion: "Remove transparent background or use bg-secondary/bg-[var(--bg-primary)] for proper visual hierarchy",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Card Missing Background Check",
+            passed: issues.length === 0,
+            blocking: false, // Warning for now
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Deprecated System Components
+     * Detects usage of legacy System components that should be migrated to @supercatch/ui
+     */
+    async checkDeprecatedComponents() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        const DEPRECATED_IMPORTS = [
+            {
+                pattern: /@\/components\/ButtonSystem/,
+                name: "ButtonSystem",
+                replacement: "Button from @/components/ui",
+            },
+            {
+                pattern: /@\/components\/FlexSystem/,
+                name: "FlexSystem",
+                replacement: "Box or Stack from @/components/ui",
+            },
+            {
+                pattern: /@\/components\/CardSystem/,
+                name: "CardSystem",
+                replacement: "Card/CardContent from @/components/ui",
+            },
+            {
+                pattern: /@\/components\/GridSystem/,
+                name: "GridSystem",
+                replacement: "Box with CSS Grid from @/components/ui",
+            },
+            {
+                pattern: /@\/components\/FeedbackSystem/,
+                name: "FeedbackSystem",
+                replacement: "Alert/Chip from @/components/ui",
+            },
+        ];
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                for (const deprecated of DEPRECATED_IMPORTS) {
+                    if (deprecated.pattern.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "deprecated-system-component",
+                            severity: "warning",
+                            message: `Deprecated ${deprecated.name} import`,
+                            suggestion: `Migrate to ${deprecated.replacement}. See docs/SYSTEM-COMPONENTS-MIGRATION.md`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Deprecated System Components",
+            passed: issues.length === 0,
+            blocking: true, // Warning only for now, can be made blocking later
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Custom Stat Display Detection
+     *
+     * Detects custom stat/metric displays that should use StatCardGrid instead.
+     *
+     * Patterns detected:
+     * - Avatar + Typography (h4/h5/h6) in Card = custom stat display
+     * - Grid of Cards with Avatar + number = custom stat grid
+     * - Box with icon + Typography value pattern
+     *
+     * These should use StatCardGrid for consistency.
+     */
+    async checkCustomStatDisplays() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        // Skip files that already use StatCardGrid
+        const SKIP_PATTERNS = [
+            /StatCardGrid/,
+            /StatCard/,
+            /\.stories\./,
+            /\.test\./,
+            /\.spec\./,
+            /packages\/ui/,
+        ];
+        // Files that are allowed to have custom stat displays (the StatCard component itself, etc.)
+        const ALLOWED_FILES = [
+            "StatCard.tsx",
+            "StatCard.examples.tsx",
+            "MetricCard.tsx",
+            "KpiCard.tsx",
+        ];
+        for (const file of allFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            // Skip allowed files
+            if (ALLOWED_FILES.some((allowed) => normalizedFile.endsWith(allowed)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Skip if file already uses StatCardGrid
+            if (SKIP_PATTERNS.some((p) => p.test(content)))
+                continue;
+            const lines = content.split("\n");
+            // Pattern 1: Avatar inside Card with Typography h4/h5/h6 (stat value pattern)
+            // This is the pattern we found in the image-mapping page
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Look for Card opening
+                if (/<Card[\s>]/.test(line) || /<Card\s+/.test(line)) {
+                    // Get the next 30 lines to check the Card content
+                    const cardBlock = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+                    // Check for Avatar + Typography with large variant (stat display pattern)
+                    const hasAvatar = /<Avatar/.test(cardBlock);
+                    const hasStatTypography = /variant=["'](h4|h5)["']/.test(cardBlock);
+                    const hasValuePattern = /\.toLocaleString|formatCurrency|formatNumber|formatFileSize/.test(cardBlock);
+                    // Check for Stack direction="row" with Avatar (horizontal stat layout)
+                    const hasHorizontalStatLayout = /<Stack[^>]*direction=["']row["'][^>]*>[\s\S]*?<Avatar/.test(cardBlock);
+                    // Check if this looks like a stat card (Avatar + large number)
+                    const looksLikeStatCard = hasAvatar && (hasStatTypography || hasValuePattern) && hasHorizontalStatLayout;
+                    if (looksLikeStatCard) {
+                        // Additional check: is this in a Grid with multiple similar Cards?
+                        const surroundingContext = lines
+                            .slice(Math.max(0, i - 10), Math.min(lines.length, i + 40))
+                            .join("\n");
+                        const isInGrid = /<Grid[^>]*container/.test(surroundingContext);
+                        const multipleCards = (surroundingContext.match(/<Card[\s>]/g) || []).length >= 3;
+                        if (isInGrid && multipleCards) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "custom-stat-display",
+                                severity: "warning",
+                                message: "Custom stat display pattern detected (Avatar + Typography in Card grid)",
+                                suggestion: "Use StatCardGrid from @/components/shared for consistent stat displays. See AdminAnalyticsClient.tsx for example.",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                            // Skip ahead to avoid duplicate warnings for same grid
+                            i += 30;
+                        }
+                    }
+                }
+            }
+            // Pattern 2: Box with colored background + icon + Typography (inline stat pattern)
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Look for Box with background color containing an icon
+                if (/<Box[^>]*(?:bg-|backgroundColor)/.test(line) ||
+                    (/<Box/.test(line) &&
+                        /className=["'][^"']*bg-(?:blue|green|red|yellow|cyan|purple)/.test(line))) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    // Check for icon + Typography pattern
+                    const hasIcon = /lucide-react|Icon|<[A-Z][a-z]+Icon/.test(contextBlock);
+                    const hasTypographyValue = /variant=["'](h4|h5|h6)["']/.test(contextBlock);
+                    const hasNumericValue = /\.toLocaleString|formatCurrency|formatNumber|%/.test(contextBlock);
+                    if (hasIcon && hasTypographyValue && hasNumericValue) {
+                        // Check if this is part of a repeated pattern (multiple stats)
+                        const fileContent = content;
+                        const similarPatterns = (fileContent.match(/<Box[^>]*(?:bg-|backgroundColor)[^>]*>[\s\S]*?<\/Box>/g) || []).length;
+                        if (similarPatterns >= 3) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "custom-stat-box",
+                                severity: "info",
+                                message: "Custom stat box pattern detected (colored Box + icon + value)",
+                                suggestion: "Consider using StatCardGrid for consistent stat displays across the app.",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                            // Skip ahead
+                            i += 15;
+                        }
+                    }
+                }
+            }
+            // Pattern 3: CardContent with direct stat layout (no CardHeader, just value + label)
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (/<CardContent/.test(line)) {
+                    const cardContentBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    // Check for stat pattern: Stack with Avatar/icon + Box with h4/h5 + body2
+                    const hasStatStack = /<Stack[^>]*direction=["']row["'][^>]*spacing=\{?\d/.test(cardContentBlock);
+                    const hasIconOrAvatar = /<Avatar|<[A-Z][a-z]+\s/.test(cardContentBlock);
+                    const hasValueLabel = /variant=["'](h4|h5)["'][\s\S]*?variant=["'](body2|caption)["']/.test(cardContentBlock);
+                    // Check if this is in a Grid with multiple Cards
+                    const surroundingContext = lines
+                        .slice(Math.max(0, i - 15), Math.min(lines.length, i + 25))
+                        .join("\n");
+                    const isInStatGrid = /<Grid[^>]*container[^>]*spacing/.test(surroundingContext);
+                    const hasMultipleGridItems = (surroundingContext.match(/<Grid[^>]*xs=\{?12[^>]*sm=\{?6|<Grid[^>]*md=\{?2\.4/g) || [])
+                        .length >= 3;
+                    if (hasStatStack &&
+                        hasIconOrAvatar &&
+                        hasValueLabel &&
+                        isInStatGrid &&
+                        hasMultipleGridItems) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "custom-stat-card-content",
+                            severity: "warning",
+                            message: "Custom stat card pattern detected (CardContent with icon + value + label in grid)",
+                            suggestion: "Use StatCardGrid from @/components/shared. It provides consistent styling, loading states, and trend indicators.",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                        // Skip the rest of this grid
+                        i += 20;
+                    }
+                }
+            }
+        }
+        return {
+            name: "Custom Stat Display Detection",
+            passed: true, // Non-blocking, just warnings
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * MetricGrid Glass Variant Check (BLOCKING)
+     *
+     * Detects usage of MetricGrid with variant="glass" which has unreliable border rendering.
+     * Use StatCardGrid instead for consistent KPI/stat displays with proper borders.
+     *
+     * ${emoji.error} BAD: <MetricGrid variant="glass" metrics={...} />
+     * ${emoji.success} GOOD: <StatCardGrid stats={...} />
+     */
+    async checkMetricGridGlassVariant() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check for MetricGrid with glass variant
+                if (/MetricGrid/.test(line) && /variant=["']glass["']/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "metric-grid-glass-variant",
+                        severity: "error",
+                        message: 'MetricGrid with variant="glass" has unreliable border rendering',
+                        suggestion: "Use StatCardGrid from @/components/shared instead. It uses the Card component with proper borders.",
+                        snippet: line.trim().substring(0, 100),
+                    });
+                }
+                // Also check for multi-line MetricGrid with glass variant
+                if (/MetricGrid/.test(line) && !/>/.test(line)) {
+                    const contextEnd = Math.min(lines.length, index + 5);
+                    const context = lines.slice(index, contextEnd).join("\n");
+                    if (/variant=["']glass["']/.test(context)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "metric-grid-glass-variant",
+                            severity: "error",
+                            message: 'MetricGrid with variant="glass" has unreliable border rendering',
+                            suggestion: "Use StatCardGrid from @/components/shared instead. It uses the Card component with proper borders.",
+                            snippet: line.trim().substring(0, 100),
+                        });
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "MetricGrid Glass Variant Check",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Chained CSS Variable Check (BLOCKING)
+     *
+     * Detects usage of CSS variables that chain through intermediate variables,
+     * which can fail to resolve in inline styles.
+     *
+     * ${emoji.error} BAD: border: "1px solid var(--glass-surface-border)" (chains to --border-color)
+     * ${emoji.success} GOOD: border: "1px solid var(--border-color)" (direct variable)
+     *
+     * Known problematic variables:
+     * - --glass-surface-border (chains to --border-color)
+     * - --glass-border-* (may not resolve in all contexts)
+     */
+    async checkChainedCssVariables() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        // Variables that chain through intermediate variables and may not resolve
+        const PROBLEMATIC_VARIABLES = [
+            {
+                pattern: /var\(--glass-surface-border\)/,
+                name: "--glass-surface-border",
+                replacement: "--border-color",
+            },
+            {
+                pattern: /var\(--glass-border-light\)/,
+                name: "--glass-border-light",
+                replacement: "--border-color",
+            },
+            {
+                pattern: /var\(--glass-border-medium\)/,
+                name: "--glass-border-medium",
+                replacement: "--border-color",
+            },
+            {
+                pattern: /var\(--glass-border-strong\)/,
+                name: "--glass-border-strong",
+                replacement: "--border-color",
+            },
+        ];
+        for (const file of allFiles) {
+            // Skip CSS files - these define the variables
+            if (file.endsWith(".css"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Check for problematic variables in inline styles
+                for (const variable of PROBLEMATIC_VARIABLES) {
+                    if (variable.pattern.test(line)) {
+                        // Only flag if this is in a style prop (inline style)
+                        const isInlineStyle = /style=\{|style:\s*\{/.test(line) ||
+                            (index > 0 && /style=\{/.test(lines.slice(Math.max(0, index - 5), index).join("\n")));
+                        if (isInlineStyle) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "chained-css-variable",
+                                severity: "error",
+                                message: `Chained CSS variable ${variable.name} may not resolve in inline styles`,
+                                suggestion: `Use var(${variable.replacement}) directly instead`,
+                                snippet: line.trim().substring(0, 100),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Chained CSS Variable Check",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Duplicate className Props Check (BLOCKING)
+     *
+     * Detects JSX elements with multiple className props, where the second one
+     * overwrites the first, causing styles to be lost.
+     *
+     * ${emoji.error} BAD: <Box className="p-4" onClick={...} className="hover:shadow-lg" />
+     * ${emoji.success} GOOD: <Box className="p-4 hover:shadow-lg" onClick={...} />
+     * ${emoji.success} GOOD: <Box className={`p-4 ${onClick ? "hover:shadow-lg" : ""}`} />
+     */
+    async checkDuplicateClassNameProps() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        for (const file of allFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Track open JSX elements across lines - only track the opening tag, not children
+            let inOpeningTag = false;
+            let tagStartLine = 0;
+            let classNameCount = 0;
+            let tagContent = "";
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Simple single-line check - only count className= that are direct props on same element
+                // Look for pattern: <Element className="..." ... className="...">
+                const singleLineMatch = line.match(/<[A-Za-z][A-Za-z0-9]*[^>]*>/g);
+                if (singleLineMatch) {
+                    for (const tag of singleLineMatch) {
+                        const classNameMatches = tag.match(/\bclassName=/g);
+                        if (classNameMatches && classNameMatches.length > 1) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "duplicate-classname-prop",
+                                severity: "error",
+                                message: "Multiple className props on same element - second one overwrites first",
+                                suggestion: "Merge className values into a single prop using template literals or cn() utility",
+                                snippet: line.trim().substring(0, 100),
+                            });
+                        }
+                    }
+                }
+                // Multi-line JSX opening tag tracking
+                // Start tracking when we see <Component (uppercase) without closing >
+                if (!inOpeningTag &&
+                    /<[A-Z][a-zA-Z0-9]*\s/.test(line) &&
+                    !/>/.test(line.split(/<[A-Z][a-zA-Z0-9]*/)[1] || "")) {
+                    inOpeningTag = true;
+                    tagStartLine = index;
+                    tagContent = line;
+                    classNameCount = (line.match(/\bclassName=/g) || []).length;
+                }
+                else if (inOpeningTag) {
+                    tagContent += "\n" + line;
+                    // Only count className= if this line is still part of the opening tag props
+                    // (before the first > that closes the opening tag)
+                    const beforeClose = line.split(">")[0];
+                    // Don't count if this line starts a nested element
+                    if (!/<[A-Za-z]/.test(beforeClose)) {
+                        classNameCount += (beforeClose.match(/\bclassName=/g) || []).length;
+                    }
+                    // Check if opening tag closes on this line
+                    if (/>/.test(line)) {
+                        // Opening tag closed
+                        if (classNameCount > 1) {
+                            issues.push({
+                                file,
+                                line: tagStartLine + 1,
+                                type: "duplicate-classname-prop",
+                                severity: "error",
+                                message: "Multiple className props on same element - second one overwrites first",
+                                suggestion: "Merge className values into a single prop using template literals or cn() utility",
+                                snippet: lines[tagStartLine].trim().substring(0, 100),
+                            });
+                        }
+                        inOpeningTag = false;
+                        classNameCount = 0;
+                        tagContent = "";
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Duplicate className Props Check",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Hardcoded Colors
+     * Detects internal colors that should use CSS variables (allows platform brand colors)
+     */
+    async checkHardcodedColors() {
+        const startTime = Date.now();
+        const issues = [];
+        const allFiles = await this.getAllFiles();
+        for (const file of allFiles) {
+            // Skip platform icon files
+            if (file.includes("PlatformIcon"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                if (line.includes("var(--color-"))
+                    return; // Already using tokens
+                // Check for hex colors
+                const hexMatches = line.matchAll(/#([0-9a-fA-F]{3,6})\b/g);
+                for (const match of hexMatches) {
+                    const color = `#${match[1]}`.toLowerCase();
+                    // Skip platform brand colors (OK to hardcode)
+                    if (PLATFORM_BRAND_COLORS.includes(color))
+                        continue;
+                    // Skip common values
+                    if (["#fff", "#ffffff", "#000", "#000000"].includes(color))
+                        continue;
+                    // Skip primary brand color used in metadata (themeColor, msapplication-TileColor)
+                    // These cannot use CSS variables as browsers parse them before stylesheets load
+                    if (["#1e63f1"].includes(color))
+                        continue;
+                    // Check context - is this in a styling property?
+                    if (/(color|background|bg|border|fill|stroke)/.test(line.toLowerCase())) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-color",
+                            severity: "info",
+                            message: `Hardcoded color: ${color}`,
+                            suggestion: "Use var(--color-{name}) or var(--text-{name}) for consistency",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Hardcoded Colors",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Autocomplete UX Guardrails (BLOCKING)
+     *
+     * Enforce consistent Autocomplete UX across the site:
+     * - Disallow `floatingLabel={false}` (we use label-in-border globally)
+     * - Disallow `openOnFocus={true}` (can create unexpected large dropdown panels)
+     * - Disallow manual <label> directly above an <Autocomplete>
+     */
+    async checkAutocompleteUX() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        for (const file of files) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            // Ignore UI primitive implementation itself
+            if (normalizedFile.startsWith("components/ui/"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("Autocomplete") && !content.includes("<label"))
+                continue;
+            const lines = content.split("\n");
+            // 1) Disallow opt-out of floating labels
+            lines.forEach((line, index) => {
+                if (/floatingLabel\s*=\s*\{?\s*false\s*\}?/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "autocomplete-floatinglabel-disabled",
+                        severity: "error",
+                        message: "Autocomplete floating labels must remain enabled (no floatingLabel={false})",
+                        suggestion: "Remove `floatingLabel={false}` and rely on the shared Autocomplete default.",
+                        snippet: line.trim().substring(0, 140),
+                    });
+                }
+                if (/openOnFocus\s*=\s*\{?\s*true\s*\}?/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "autocomplete-openonfocus-enabled",
+                        severity: "error",
+                        message: "Autocomplete should not auto-open on focus (openOnFocus={true} is disallowed)",
+                        suggestion: "Remove `openOnFocus` (default is false) and rely on click-to-open behavior.",
+                        snippet: line.trim().substring(0, 140),
+                    });
+                }
+            });
+            // 2) Disallow manual <label> directly above <Autocomplete>
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (!/<label\b/i.test(line))
+                    continue;
+                if (line.trim().startsWith("//"))
+                    continue;
+                // Look ahead for the next meaningful line
+                for (let j = i + 1; j < Math.min(i + 6, lines.length); j++) {
+                    const next = lines[j].trim();
+                    if (!next || next.startsWith("//"))
+                        continue;
+                    if (next.startsWith("{/*") || next.startsWith("*/}"))
+                        continue;
+                    if (/<Autocomplete\b/.test(next)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "autocomplete-manual-label",
+                            severity: "error",
+                            message: "Manual <label> directly above <Autocomplete> is not allowed (use Autocomplete label prop only)",
+                            suggestion: "Remove the manual <label> and pass its text via the Autocomplete `label` prop.",
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                    break;
+                }
+            }
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Autocomplete UX Guardrails",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Autocomplete Implementation Guardrails (BLOCKING)
+     *
+     * Ensure the shared Autocomplete keeps the runtime protections that prevent
+     * conditional-mount click-through from opening the dropdown and visually
+     * "whiting out" large parts of the page.
+     */
+    async checkAutocompleteImplementation() {
+        const startTime = Date.now();
+        const issues = [];
+        const file = "components/ui/Autocomplete.tsx";
+        try {
+            const content = fs.readFileSync(file, "utf8");
+            const requiredSnippets = [
+                { needle: /openOnFocus\s*=\s*false/, label: "default openOnFocus=false" },
+                {
+                    needle: /onPointerDown=\{\(\)\s*=>\s*\{\s*\n?\s*lastPointerDownAtRef\.current\s*=\s*Date\.now\(\)/m,
+                    label: "pointerdown gating for click-to-open",
+                },
+                {
+                    needle: /ignoreClicksUntilRef\s*=\s*useRef<\s*number\s*>\(\s*Date\.now\(\)\s*\+\s*\d+/m,
+                    label: "initial click-through ignore window",
+                },
+            ];
+            for (const req of requiredSnippets) {
+                if (!req.needle.test(content)) {
+                    issues.push({
+                        file,
+                        line: 1,
+                        type: "autocomplete-implementation-guard",
+                        severity: "error",
+                        message: `Shared Autocomplete missing required guardrail: ${req.label}`,
+                        suggestion: "Do not remove the click-through protections; they prevent the shipping page from being visually obscured when toggling features.",
+                    });
+                }
+            }
+        }
+        catch {
+            issues.push({
+                file,
+                line: 1,
+                type: "autocomplete-implementation-guard",
+                severity: "error",
+                message: "Could not read shared Autocomplete implementation to validate click-through protections.",
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Autocomplete Implementation Guardrails",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    async runAll() {
+        const startTime = Date.now();
+        console.log("\n🧩 CONSOLIDATED UI COMPONENTS PREFLIGHT");
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkButtons());
+        checks.push(await this.checkLinkButtons());
+        checks.push(await this.checkClickableNonButtons());
+        checks.push(await this.checkIconButtonAccessibility());
+        checks.push(await this.checkBadges());
+        checks.push(await this.checkIcons());
+        checks.push(await this.checkBorderRadius());
+        checks.push(await this.checkShadows());
+        checks.push(await this.checkChips());
+        checks.push(await this.checkPlatformIcons());
+        checks.push(await this.checkNumericSpacing());
+        checks.push(await this.checkHardcodedColors());
+        checks.push(await this.checkAutocompleteUX());
+        checks.push(await this.checkAutocompleteImplementation());
+        checks.push(await this.checkCardOutlines());
+        checks.push(await this.checkCardBackground());
+        checks.push(await this.checkCardMissingBackground());
+        checks.push(await this.checkMetricGridGlassVariant());
+        checks.push(await this.checkChainedCssVariables());
+        checks.push(await this.checkDuplicateClassNameProps());
+        checks.push(await this.checkUnifiedDialogPadding());
+        checks.push(await this.checkDeprecatedComponents());
+        checks.push(await this.checkCustomStatDisplays());
+        const totalDuration = Date.now() - startTime;
+        const allIssues = checks.flatMap((c) => c.issues);
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            errors: allIssues.filter((i) => i.severity === "error").length,
+            warnings: allIssues.filter((i) => i.severity === "warning").length,
+            info: allIssues.filter((i) => i.severity === "info").length,
+        };
+        this.printResults(checks, totalDuration, summary);
+        return {
+            module: "ui-components",
+            passed: true,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+    printResults(checks, totalDuration, summary) {
+        console.log("\n" + (0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} UI COMPONENTS RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.issues.length === 0 ? `${console_chars_1.emoji.success}` : `${console_chars_1.emoji.warning}`;
+            const count = check.issues.length > 0 ? ` (${check.issues.length} issues)` : "";
+            console.log(`${icon} ${check.name.padEnd(30)} ${(check.duration / 1000).toFixed(1)}s${count}`);
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.warning}  Warnings: ${summary.warnings} | ${console_chars_1.emoji.info}  Info: ${summary.info} | ${console_chars_1.emoji.clock}  Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        // Print detailed issues if verbose mode or if there are warnings/errors
+        const allIssues = checks.flatMap((c) => c.issues);
+        const warningsAndErrors = allIssues.filter((i) => i.severity === "warning" || i.severity === "error");
+        if (this.verbose || warningsAndErrors.length > 0) {
+            console.log(`\n${console_chars_1.emoji.clipboard} DETAILED ISSUES:`);
+            console.log((0, console_chars_1.createDivider)(80, "heavy"));
+            checks.forEach((check) => {
+                if (check.issues.length > 0) {
+                    console.log(`\n${console_chars_1.emoji.search} ${check.name}:`);
+                    check.issues.forEach((issue) => {
+                        const icon = issue.severity === "error"
+                            ? `${console_chars_1.emoji.error}`
+                            : issue.severity === "warning"
+                                ? `${console_chars_1.emoji.warning}`
+                                : `${console_chars_1.emoji.info}`;
+                        const relPath = issue.file.replace(/\\/g, "/");
+                        console.log(`  ${icon} ${relPath}:${issue.line}`);
+                        console.log(`     ${issue.message}`);
+                        if (issue.suggestion) {
+                            console.log(`     ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+                        }
+                    });
+                }
+            });
+        }
+        console.log(`\n${console_chars_1.emoji.success} UI COMPONENTS PASSED (non-blocking warnings)`);
+    }
+    shouldFailInStrictMode(checks) {
+        if (!this.strictUniformity)
+            return false;
+        return checks.some((c) => c.issues.some((i) => i.severity === "warning" || i.severity === "error"));
+    }
+}
+exports.UIComponentsPreflightModule = UIComponentsPreflightModule;
+async function main() {
+    appExclusions = await (0, exclusions_1.getExclusions)(id);
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const mode = args[0] || "all";
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const parallel = args.includes("--parallel") || args.includes("-p");
+    const module = new UIComponentsPreflightModule({ verbose, parallel });
+    const runSingle = async (name, fn) => {
+        const check = await fn();
+        // Ensure subset modes still print a useful report
+        const summary = {
+            total: 1,
+            passed: 1,
+            failed: 0,
+            errors: check.issues.filter((i) => i.severity === "error").length,
+            warnings: check.issues.filter((i) => i.severity === "warning").length,
+            info: check.issues.filter((i) => i.severity === "info").length,
+        };
+        module.printResults([check], check.duration, summary);
+        return {
+            module: `ui-components:${name}`,
+            passed: true,
+            totalDuration: check.duration,
+            checks: [check],
+            summary: {
+                total: 1,
+                passed: 1,
+                failed: 0,
+                errors: 0,
+                warnings: check.issues.filter((i) => i.severity === "warning").length,
+                info: check.issues.filter((i) => i.severity === "info").length,
+            },
+        };
+    };
+    let result;
+    switch (mode) {
+        case "buttons":
+            result = await runSingle("buttons", () => module.checkButtons());
+            break;
+        case "links":
+            result = await runSingle("links", () => module.checkLinkButtons());
+            break;
+        case "clickables":
+            result = await runSingle("clickables", () => module.checkClickableNonButtons());
+            break;
+        case "iconbuttons":
+            result = await runSingle("iconbuttons", () => module.checkIconButtonAccessibility());
+            break;
+        case "uniformity":
+            // Uniformity mode: highest-signal checks that prevent UI drift.
+            // Kept warning-only by default; can be made strict with PREFLIGHT_STRICT_UNIFORMITY=1.
+            console.log("\n🧭 UI UNIFORMITY (subset)");
+            console.log((0, console_chars_1.createDivider)(80, "heavy"));
+            const uniformityChecksPromises = [
+                module.checkButtons(),
+                module.checkLinkButtons(),
+                module.checkClickableNonButtons(),
+                module.checkIconButtonAccessibility(),
+                module.checkUnifiedDialogPadding(),
+            ];
+            const uniformityChecks = await Promise.all(uniformityChecksPromises);
+            module.printResults(uniformityChecks, uniformityChecks.reduce((sum, c) => sum + c.duration, 0), {
+                total: uniformityChecks.length,
+                passed: uniformityChecks.length,
+                failed: 0,
+                errors: uniformityChecks.flatMap((c) => c.issues).filter((i) => i.severity === "error")
+                    .length,
+                warnings: uniformityChecks
+                    .flatMap((c) => c.issues)
+                    .filter((i) => i.severity === "warning").length,
+                info: uniformityChecks.flatMap((c) => c.issues).filter((i) => i.severity === "info")
+                    .length,
+            });
+            result = {
+                module: "ui-components:uniformity",
+                passed: true,
+                totalDuration: uniformityChecks.reduce((sum, c) => sum + c.duration, 0),
+                checks: uniformityChecks,
+                summary: {
+                    total: uniformityChecks.length,
+                    passed: uniformityChecks.length,
+                    failed: 0,
+                    errors: 0,
+                    warnings: uniformityChecks
+                        .flatMap((c) => c.issues)
+                        .filter((i) => i.severity === "warning").length,
+                    info: uniformityChecks.flatMap((c) => c.issues).filter((i) => i.severity === "info")
+                        .length,
+                },
+            };
+            break;
+        case "badges":
+            result = await runSingle("badges", () => module.checkBadges());
+            break;
+        case "icons":
+            result = await runSingle("icons", () => module.checkIcons());
+            break;
+        case "radius":
+            result = await runSingle("radius", () => module.checkBorderRadius());
+            break;
+        case "shadows":
+            result = await runSingle("shadows", () => module.checkShadows());
+            break;
+        case "chips":
+            result = await runSingle("chips", () => module.checkChips());
+            break;
+        case "platforms":
+            result = await runSingle("platforms", () => module.checkPlatformIcons());
+            break;
+        case "spacing":
+            result = await runSingle("spacing", () => module.checkNumericSpacing());
+            break;
+        case "colors":
+            result = await runSingle("colors", () => module.checkHardcodedColors());
+            break;
+        case "cards":
+            result = await runSingle("cards", () => module.checkCardOutlines());
+            break;
+        case "card-backgrounds":
+            result = await runSingle("card-backgrounds", () => module.checkCardBackground());
+            break;
+        case "card-missing-bg":
+        case "missing-backgrounds":
+            result = await runSingle("card-missing-backgrounds", () => module.checkCardMissingBackground());
+            break;
+        case "metric-grid":
+        case "glass":
+            result = await runSingle("metric-grid-glass", () => module.checkMetricGridGlassVariant());
+            break;
+        case "css-variables":
+        case "chained-vars":
+            result = await runSingle("chained-css-variables", () => module.checkChainedCssVariables());
+            break;
+        case "duplicate-classname":
+        case "classname":
+            result = await runSingle("duplicate-classname", () => module.checkDuplicateClassNameProps());
+            break;
+        case "deprecated":
+            result = await runSingle("deprecated", () => module.checkDeprecatedComponents());
+            break;
+        case "stat-displays":
+        case "stats":
+            result = await runSingle("stat-displays", () => module.checkCustomStatDisplays());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    const strictFail = module.shouldFailInStrictMode(result.checks);
+    process.exit(strictFail ? 1 : 0);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-components.js.map